feat(examples): add AI-powered search example#114
feat(examples): add AI-powered search example#114denis-shvets wants to merge 8 commits intoTanStack:mainfrom
Conversation
denis-shvets
force-pushed
the
ts-react-search
branch
from
082c6b8 to
e2283a1
Compare
|
Added navigation between pages: |
|
View your CI Pipeline Execution ↗ for commit 9e80da9
☁️ Nx Cloud last updated this comment at |
@tanstack/ai
@tanstack/ai-anthropic
@tanstack/ai-client
@tanstack/ai-devtools-core
@tanstack/ai-fal
@tanstack/ai-gemini
@tanstack/ai-grok
@tanstack/ai-ollama
@tanstack/ai-openai
@tanstack/ai-openrouter
@tanstack/ai-preact
@tanstack/ai-react
@tanstack/ai-react-ui
@tanstack/ai-solid
@tanstack/ai-solid-ui
@tanstack/ai-svelte
@tanstack/ai-vue
@tanstack/ai-vue-ui
@tanstack/preact-ai-devtools
@tanstack/react-ai-devtools
@tanstack/solid-ai-devtools
commit: |
|
We should hold on this example until we have a structured output generation function. |
denis-shvets
force-pushed
the
ts-react-search
branch
from
0f0e7e5 to
200e184
Compare
denis-shvets
force-pushed
the
ts-react-search
branch
from
200e184 to
720ebf6
Compare
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughIntroduces a complete new example project Changes
Sequence DiagramsequenceDiagram
actor User
participant SearchForm as Search Form
participant SearchComponent as Search Component
participant ChatAPI as /api/search (OpenAI)
participant Router as React Router
participant DataFetch as Data Collection<br/>(Orders/Disputes/etc)
participant FeatureTable as Feature Table
User->>SearchForm: Enter natural language query
User->>SearchForm: Or click quick prompt
SearchForm->>SearchComponent: onChange/onSubmit with text
SearchComponent->>ChatAPI: POST messages + conversationId
ChatAPI->>ChatAPI: Parse with OpenAI<br/>(system prompt + schema)
ChatAPI-->>SearchComponent: Stream JSON {name, parameters}
SearchComponent->>SearchComponent: Parse response<br/>Extract domain & params
SearchComponent->>Router: navigate(/disputes|/orders|/settlements?params)
Router->>DataFetch: useQuery with filters<br/>(status, reason, date range, etc)
DataFetch-->>Router: Live filtered results
Router->>FeatureTable: Render filtered data
FeatureTable-->>User: Display matching records
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 19
🧹 Nitpick comments (17)
examples/ts-react-search/src/components/ui/README.md (1)
1-7: Clear and concise documentation.The README accurately describes the shadcn/ui setup and provides the correct installation command. Documentation is appropriate for an example project.
Optional enhancement: Consider listing which shadcn/ui components are already installed in this example (e.g., Button, Calendar, DatePicker, Label, Popover, Select, Table) to help developers understand what's available without needing to explore the directory. This would make the documentation even more discoverable.
examples/ts-react-search/public/manifest.json (1)
1-25: Icon files are present but empty.The manifest references
favicon.ico,logo192.png, andlogo512.png—these files exist in thepublic/directory. However, they are all 0-byte placeholder files. While this won't prevent the example from running, the PWA will fail to display icons correctly. For a complete example, populate these files with actual images or remove the references from the manifest.examples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsx (2)
1-1: Remove unnecessary 'use client' directive.The
'use client'directive is specific to React Server Components (Next.js App Router). In a Vite-based application, this directive has no effect and may cause confusion.🔎 Proposed fix
-'use client' - const PROMPTS = [
21-23: Consider simplifying the click handler.The
makePromptClickHandlerwrapper can be replaced with an inline arrow function for cleaner code.🔎 Proposed refactor
function QuickPrompts({ onClick }: QuickPromptsProps) { - function makePromptClickHandler(value: string) { - return () => onClick(value) - } - return ( <div className="space-y-2"> <p className="text-center text-sm text-muted-foreground"> Quick prompts: </p> <ul className="flex flex-wrap justify-center gap-2"> {PROMPTS.map(({ prompt, locale }) => ( <li key={prompt}> <button className="text-sm px-2 py-1 rounded bg-slate-700 text-cyan-400 cursor-pointer hover:bg-slate-600 transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50" type="button" - onClick={makePromptClickHandler(prompt)} + onClick={() => onClick(prompt)} > {locale} • {prompt} </button>examples/ts-react-search/src/utils/getBaseUrl.ts (1)
1-5: Consider requiring VITE_API_BASE_URL in production environments.The hardcoded fallback to
'http://localhost:3000'on Line 4 may cause issues in production deployments where the API server is not at localhost. Consider either requiring the environment variable or providing a more flexible configuration strategy.🔎 Proposed enhancement to validate environment configuration
function getBaseUrl() { if (typeof window !== 'undefined') return '' - return import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000' + const baseUrl = import.meta.env.VITE_API_BASE_URL + if (!baseUrl && import.meta.env.MODE === 'production') { + throw new Error('VITE_API_BASE_URL must be set in production') + } + return baseUrl || 'http://localhost:3000' }examples/ts-react-search/src/router.tsx (1)
7-15: Consider singleton pattern to avoid multiple router instances.The
getRouter()function creates a new router instance on each call. If this function is called multiple times, it could lead to multiple router instances, which may cause unexpected behavior.🔎 Proposed singleton pattern implementation
+let routerInstance: ReturnType<typeof createRouter> | undefined + export const getRouter = () => { + if (routerInstance) return routerInstance + const router = createRouter({ routeTree, scrollRestoration: true, defaultPreloadStaleTime: 0, }) + routerInstance = router return router }examples/ts-react-search/src/components/HeroSection/Brand.tsx (1)
1-13: LGTM! Consider adding a return type annotation.The component implementation is clean and follows React best practices. The Tailwind 4 gradient syntax and animations are correctly applied.
🔎 Optional: Add explicit return type for better type safety
-function Brand() { +function Brand(): JSX.Element { return (examples/ts-react-search/src/routes/index.tsx (1)
5-7: Consider adding a comment explaining the null return.The
HomePagecomponent returnsnull, which is unusual but appears intentional given that the actual content is rendered via the__root.tsxlayout. A brief comment would help clarify this architectural decision for future maintainers.🔎 Suggested documentation
function HomePage() { + // Content is rendered in __root.tsx layout via HeroSection return null }examples/ts-react-search/src/features/orders/ordersCollection.ts (1)
11-16: Add error handling for fetch response.The fetch call doesn't check
response.okbefore parsing JSON. If the API returns an error status (4xx/5xx), this could lead to unexpected behavior or unhelpful error messages.🔎 Suggested improvement
queryFn: async () => { const response = await fetch(`${getBaseUrl()}/api/orders`) + + if (!response.ok) { + throw new Error(`Failed to fetch orders: ${response.status} ${response.statusText}`) + } + const data = await response.json() return z.array(orderSchema).parse(data) },examples/ts-react-search/src/components/ui/calendar.tsx (1)
62-74: Chevron component only handles 'left' orientation explicitly.The
orientationprop includes'up' | 'down'options, but the component only checks for'left'and defaults toChevronRightIconfor everything else. While react-day-picker typically only uses left/right for month navigation, consider handling all cases explicitly for completeness.🔎 Optional: Handle all orientations
const defaultComponents = { Chevron: (props: { className?: string size?: number disabled?: boolean orientation?: 'left' | 'right' | 'up' | 'down' }) => { - if (props.orientation === 'left') { - return <ChevronLeftIcon size={16} {...props} aria-hidden="true" /> + const { orientation, ...rest } = props + if (orientation === 'left') { + return <ChevronLeftIcon size={16} {...rest} aria-hidden="true" /> } - return <ChevronRightIcon size={16} {...props} aria-hidden="true" /> + return <ChevronRightIcon size={16} {...rest} aria-hidden="true" /> }, }examples/ts-react-search/src/features/orders/useOrdersQuery.ts (1)
17-18: Potential confusion with date field filtering.The filter uses
gte(order.from, search.from ?? order.from)andlte(order.to, search.to ?? order.to). Whensearch.fromis undefined, this comparesorder.from >= order.from, which always evaluates to true (the intended no-op behavior).However, the field names are confusing:
order.fromandorder.toappear to be the order's own date range, whilesearch.fromandsearch.toare filter boundaries. Typically, you'd filter based on a single order date (e.g.,order.dateororder.createdAt) against the search range. Consider renaming for clarity or adding a comment explaining the intent.examples/ts-react-search/src/routes/_layout/disputes.tsx (1)
23-23: Avoid usingJSON.stringify()as a React key.Using
JSON.stringify(search)as a key has several drawbacks:
- Performance: Serialization runs on every render
- Instability: Same search object produces new string instances, causing unnecessary remounts
- Unpredictable ordering: JSON.stringify doesn't guarantee property order
The
DisputesFilterscomponent likely doesn't need an explicit key here. React's reconciliation can handle updates based on thesearchprop changes internally. If forced remounting is intentional, consider using a stable hash or specific search field values.🔎 Recommended fix
- <DisputesFilters key={JSON.stringify(search)} search={search} /> + <DisputesFilters search={search} />If you need forced remounting when search changes, use a more stable approach:
- <DisputesFilters key={JSON.stringify(search)} search={search} /> + <DisputesFilters + key={`${search.status}-${search.reason}-${search.from}-${search.to}`} + search={search} + />Note: This same pattern appears in
settlements.tsx(line 23) and likelyorders.tsx. Consider applying the same fix across all route files.examples/ts-react-search/src/features/orders/OrdersTable.tsx (1)
47-47: Questionable use ofw-0utility on table cell.The
w-0class setswidth: 0px, which conflicts with the cell content (a formatted date) and thepr-6padding. This appears to be an attempt to make the column compact, butw-0may cause rendering issues or unexpected layout behavior.If you want the column to be as narrow as possible while still fitting content:
- <TableCell className="w-0 pr-6">{formatDate(order.to)}</TableCell> + <TableCell className="w-auto whitespace-nowrap pr-6">{formatDate(order.to)}</TableCell>Or if you want to remove width constraints entirely:
- <TableCell className="w-0 pr-6">{formatDate(order.to)}</TableCell> + <TableCell className="pr-6">{formatDate(order.to)}</TableCell>examples/ts-react-search/src/routes/_layout/settlements.tsx (1)
23-23: Avoid usingJSON.stringify()as a React key (duplicate issue).This has the same problems as noted in
disputes.tsxline 23. UsingJSON.stringify(search)as a key causes performance overhead and unnecessary component remounts.🔎 Recommended fix
- <SettlementsFilters key={JSON.stringify(search)} search={search} /> + <SettlementsFilters search={search} />Or if forced remounting is needed:
- <SettlementsFilters key={JSON.stringify(search)} search={search} /> + <SettlementsFilters + key={`${search.currency}-${search.from}-${search.to}`} + search={search} + />examples/ts-react-search/src/hooks/useSpeechRecognition.ts (1)
73-73: Optimize useEffect dependencies to prevent unnecessary recreation.The dependencies array includes
options?.lang,options?.continuous, andoptions?.interimResults. If theoptionsobject reference changes on every render (which is common with inline object literals), this will cause theSpeechRecognitioninstance to be recreated unnecessarily.Consider destructuring
optionsat the hook entry or adding a note in the component docs to memoize the options object.🔎 Recommended fix
-export const useSpeechRecognition = (options?: UseSpeechRecognitionOptions) => { +export const useSpeechRecognition = (options?: UseSpeechRecognitionOptions) => { + const lang = options?.lang + const continuous = options?.continuous + const interimResults = options?.interimResults + const [listening, setListening] = useState(false) const [transcript, setTranscript] = useState('') const [error, setError] = useState<string | null>(null) @@ -24,9 +27,9 @@ const recognition = new SpeechRecognitionCtor() - recognition.lang = options?.lang ?? 'en-US' - recognition.continuous = options?.continuous ?? false - recognition.interimResults = options?.interimResults ?? false + recognition.lang = lang ?? 'en-US' + recognition.continuous = continuous ?? false + recognition.interimResults = interimResults ?? false // ... rest of the code - }, [options?.lang, options?.continuous, options?.interimResults]) + }, [lang, continuous, interimResults])Note: Since this is noted as "vibe-coded for a quick demo," this optimization can be deferred if the options are always memoized at the call site.
examples/ts-react-search/src/routes/api/search.ts (1)
53-83: Consider migrating to structured output generation when available.As noted by @jherr in the PR comments, this example should ideally wait for structured output generation support. The current approach uses prompt engineering to coerce the model into returning JSON, which is less reliable than native structured output.
Based on the coding guidelines, the library should support tool definitions with Zod schemas for structured outputs. Once that feature is available, consider refactoring this prompt to use a proper structured output mechanism.
Do you want me to draft an example implementation using
toolDefinition()with Zod schema inference once structured output support is added?examples/ts-react-search/src/features/settlements/constants.ts (1)
15-23: Redundant map where keys equal values.
SETTLEMENT_CURRENCY_MAPmaps each currency code to itself. UnlikeORDER_STATUS_MAPorDISPUTE_STATUS_MAPwhich provide human-readable labels, this map adds no value. Consider removing it or adding meaningful display names if intended for UI labels.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
examples/ts-react-search/public/favicon.icois excluded by!**/*.icoexamples/ts-react-search/public/logo192.pngis excluded by!**/*.pngexamples/ts-react-search/public/logo512.pngis excluded by!**/*.pngexamples/ts-react-search/public/tanstack-circle-logo.pngis excluded by!**/*.pngexamples/ts-react-search/public/tanstack-word-logo-white.svgis excluded by!**/*.svgexamples/ts-react-search/src/logo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (74)
examples/ts-react-search/.cta.jsonexamples/ts-react-search/.gitignoreexamples/ts-react-search/.vscode/settings.jsonexamples/ts-react-search/README.mdexamples/ts-react-search/package.jsonexamples/ts-react-search/public/manifest.jsonexamples/ts-react-search/public/robots.txtexamples/ts-react-search/src/components/FilterSelect.tsxexamples/ts-react-search/src/components/HeroSection/Brand.tsxexamples/ts-react-search/src/components/HeroSection/HeroSection.tsxexamples/ts-react-search/src/components/HeroSection/Navigation.tsxexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/components/HeroSection/Search/Search.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/components/HeroSection/Search/index.tsexamples/ts-react-search/src/components/HeroSection/index.tsexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/components/TableSummary.tsxexamples/ts-react-search/src/components/ui/README.mdexamples/ts-react-search/src/components/ui/button.tsxexamples/ts-react-search/src/components/ui/calendar.tsxexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/components/ui/label.tsxexamples/ts-react-search/src/components/ui/popover.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/features/disputes/DisputesFilters.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/disputes/types.tsexamples/ts-react-search/src/features/disputes/useDisputesQuery.tsexamples/ts-react-search/src/features/orders/OrdersFilters.tsxexamples/ts-react-search/src/features/orders/OrdersManager.tsxexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/features/orders/data.tsexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/features/orders/types.tsexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/features/settlements/SettlementsTable.tsxexamples/ts-react-search/src/features/settlements/constants.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/features/settlements/settlementsCollection.tsexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/hooks/useSpeechRecognition.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/router.tsxexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/routes/_layout/route.tsxexamples/ts-react-search/src/routes/_layout/settlements.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/routes/api/search.tsexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/routes/index.tsxexamples/ts-react-search/src/speech.d.tsexamples/ts-react-search/src/styles.cssexamples/ts-react-search/src/types.tsexamples/ts-react-search/src/utils/cn.tsexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/tsconfig.jsonexamples/ts-react-search/vite.config.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from/adapterssubpath rather than monolithic adapters
Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions withtoolDefinition()and Zod schema inference
Implement isomorphic tool system usingtoolDefinition()with.server()and.client()implementations for dual-environment execution
Use type-safe per-model configuration with provider options typed based on selected model to ensure compile-time safety
Implement stream processing with StreamProcessor for handling chunked responses and support partial JSON parsing for streaming AI responses
Files:
examples/ts-react-search/src/utils/cn.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/components/ui/calendar.tsxexamples/ts-react-search/src/features/disputes/useDisputesQuery.tsexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/src/features/settlements/settlementsCollection.tsexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/vite.config.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/router.tsxexamples/ts-react-search/src/components/HeroSection/Brand.tsxexamples/ts-react-search/src/components/HeroSection/Navigation.tsxexamples/ts-react-search/src/routes/_layout/route.tsxexamples/ts-react-search/src/features/settlements/SettlementsTable.tsxexamples/ts-react-search/src/features/disputes/types.tsexamples/ts-react-search/src/components/FilterSelect.tsxexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/components/HeroSection/Search/index.tsexamples/ts-react-search/src/components/ui/label.tsxexamples/ts-react-search/src/features/orders/OrdersManager.tsxexamples/ts-react-search/src/features/disputes/DisputesFilters.tsxexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/routes/_layout/settlements.tsxexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/components/ui/button.tsxexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/routes/api/search.tsexamples/ts-react-search/src/hooks/useSpeechRecognition.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/components/HeroSection/Search/Search.tsxexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/features/orders/OrdersFilters.tsxexamples/ts-react-search/src/features/settlements/constants.tsexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/ui/popover.tsxexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/features/orders/types.tsexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/components/HeroSection/HeroSection.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/routes/index.tsxexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/components/HeroSection/index.tsexamples/ts-react-search/src/types.tsexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/orders/data.tsexamples/ts-react-search/src/components/TableSummary.tsxexamples/ts-react-search/src/speech.d.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for function and variable names throughout the codebase
Files:
examples/ts-react-search/src/utils/cn.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/components/ui/calendar.tsxexamples/ts-react-search/src/features/disputes/useDisputesQuery.tsexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/src/features/settlements/settlementsCollection.tsexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/vite.config.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/router.tsxexamples/ts-react-search/src/components/HeroSection/Brand.tsxexamples/ts-react-search/src/components/HeroSection/Navigation.tsxexamples/ts-react-search/src/routes/_layout/route.tsxexamples/ts-react-search/src/features/settlements/SettlementsTable.tsxexamples/ts-react-search/src/features/disputes/types.tsexamples/ts-react-search/src/components/FilterSelect.tsxexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/components/HeroSection/Search/index.tsexamples/ts-react-search/src/components/ui/label.tsxexamples/ts-react-search/src/features/orders/OrdersManager.tsxexamples/ts-react-search/src/features/disputes/DisputesFilters.tsxexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/routes/_layout/settlements.tsxexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/components/ui/button.tsxexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/routes/api/search.tsexamples/ts-react-search/src/hooks/useSpeechRecognition.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/components/HeroSection/Search/Search.tsxexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/features/orders/OrdersFilters.tsxexamples/ts-react-search/src/features/settlements/constants.tsexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/ui/popover.tsxexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/features/orders/types.tsexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/components/HeroSection/HeroSection.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/routes/index.tsxexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/components/HeroSection/index.tsexamples/ts-react-search/src/types.tsexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/orders/data.tsexamples/ts-react-search/src/components/TableSummary.tsxexamples/ts-react-search/src/speech.d.ts
examples/**
📄 CodeRabbit inference engine (CLAUDE.md)
Examples are not built by Nx and should be run independently from their directories with
pnpm devorpnpm install && pnpm dev
Files:
examples/ts-react-search/src/utils/cn.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/components/ui/calendar.tsxexamples/ts-react-search/src/features/disputes/useDisputesQuery.tsexamples/ts-react-search/public/robots.txtexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/src/features/settlements/settlementsCollection.tsexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/vite.config.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/router.tsxexamples/ts-react-search/src/components/HeroSection/Brand.tsxexamples/ts-react-search/src/components/HeroSection/Navigation.tsxexamples/ts-react-search/src/routes/_layout/route.tsxexamples/ts-react-search/src/features/settlements/SettlementsTable.tsxexamples/ts-react-search/src/features/disputes/types.tsexamples/ts-react-search/src/components/FilterSelect.tsxexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/components/HeroSection/Search/index.tsexamples/ts-react-search/src/components/ui/label.tsxexamples/ts-react-search/src/features/orders/OrdersManager.tsxexamples/ts-react-search/src/features/disputes/DisputesFilters.tsxexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/routes/_layout/settlements.tsxexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/components/ui/button.tsxexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/routes/api/search.tsexamples/ts-react-search/src/hooks/useSpeechRecognition.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/components/HeroSection/Search/Search.tsxexamples/ts-react-search/tsconfig.jsonexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/features/orders/OrdersFilters.tsxexamples/ts-react-search/src/features/settlements/constants.tsexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/ui/popover.tsxexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/features/orders/types.tsexamples/ts-react-search/src/components/ui/README.mdexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/components/HeroSection/HeroSection.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/styles.cssexamples/ts-react-search/src/routes/index.tsxexamples/ts-react-search/package.jsonexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/components/HeroSection/index.tsexamples/ts-react-search/src/types.tsexamples/ts-react-search/README.mdexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/orders/data.tsexamples/ts-react-search/src/components/TableSummary.tsxexamples/ts-react-search/src/speech.d.tsexamples/ts-react-search/public/manifest.json
🧠 Learnings (12)
📓 Common learnings
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Implement framework integrations using the headless `tanstack/ai-client` for state management with framework-specific hooks (useChat) on top
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Implement stream processing with StreamProcessor for handling chunked responses and support partial JSON parsing for streaming AI responses
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
Applied to files:
examples/ts-react-search/src/utils/cn.tsexamples/ts-react-search/src/features/settlements/settlementsCollection.tsexamples/ts-react-search/vite.config.tsexamples/ts-react-search/src/components/HeroSection/Search/index.tsexamples/ts-react-search/.cta.jsonexamples/ts-react-search/.gitignoreexamples/ts-react-search/tsconfig.jsonexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/package.jsonexamples/ts-react-search/src/components/HeroSection/index.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.test.ts : Write unit tests using Vitest alongside source files with `.test.ts` naming convention
Applied to files:
examples/ts-react-search/vite.config.tsexamples/ts-react-search/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions with `toolDefinition()` and Zod schema inference
Applied to files:
examples/ts-react-search/src/features/disputes/types.tsexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/tsconfig.jsonexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/features/orders/types.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Implement framework integrations using the headless `tanstack/ai-client` for state management with framework-specific hooks (useChat) on top
Applied to files:
examples/ts-react-search/src/components/HeroSection/Search/Search.tsxexamples/ts-react-search/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to .eslintrc* : Use ESLint with custom TanStack config for linting all TypeScript and JavaScript files
Applied to files:
examples/ts-react-search/tsconfig.jsonexamples/ts-react-search/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from `/adapters` subpath rather than monolithic adapters
Applied to files:
examples/ts-react-search/tsconfig.jsonexamples/ts-react-search/src/routeTree.gen.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use type-safe per-model configuration with provider options typed based on selected model to ensure compile-time safety
Applied to files:
examples/ts-react-search/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use camelCase for function and variable names throughout the codebase
Applied to files:
examples/ts-react-search/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/adapters/*.ts : Create individual adapter implementations for each provider capability (text, embed, summarize, image) with separate exports to enable tree-shaking
Applied to files:
examples/ts-react-search/tsconfig.jsonexamples/ts-react-search/src/routeTree.gen.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Implement isomorphic tool system using `toolDefinition()` with `.server()` and `.client()` implementations for dual-environment execution
Applied to files:
examples/ts-react-search/tsconfig.json
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/model-meta.ts : Maintain model metadata files that define provider options and capabilities per model for per-model type safety
Applied to files:
examples/ts-react-search/src/features/orders/data.ts
🧬 Code graph analysis (35)
examples/ts-react-search/src/components/ui/calendar.tsx (1)
examples/ts-react-search/src/components/ui/button.tsx (1)
buttonVariants(61-61)
examples/ts-react-search/src/features/disputes/useDisputesQuery.ts (1)
examples/ts-react-search/src/features/disputes/types.ts (1)
DisputesSearch(15-15)
examples/ts-react-search/src/features/settlements/settlementsCollection.ts (1)
examples/ts-react-search/src/features/settlements/constants.ts (1)
settlementSchema(25-30)
examples/ts-react-search/src/features/disputes/data.ts (1)
examples/ts-react-search/src/features/disputes/types.ts (1)
Dispute(13-13)
examples/ts-react-search/src/routes/_layout/route.tsx (5)
examples/ts-react-search/src/routes/__root.tsx (1)
Route(15-40)examples/ts-react-search/src/routes/_layout/disputes.tsx (1)
Route(9-16)examples/ts-react-search/src/routes/_layout/orders.tsx (1)
Route(9-16)examples/ts-react-search/src/routes/_layout/settlements.tsx (1)
Route(9-16)examples/ts-react-search/src/routes/index.tsx (1)
Route(3-3)
examples/ts-react-search/src/features/settlements/SettlementsTable.tsx (2)
examples/ts-react-search/src/features/settlements/types.ts (1)
Settlement(10-10)examples/ts-react-search/src/components/ui/table.tsx (6)
Table(108-108)TableHeader(109-109)TableRow(113-113)TableHead(112-112)TableBody(110-110)TableCell(114-114)
examples/ts-react-search/src/features/disputes/types.ts (1)
examples/ts-react-search/src/features/disputes/constants.ts (4)
DISPUTE_STATUSES(5-10)DISPUTE_REASONS(19-26)disputeSchema(37-43)disputesSearchSchema(45-50)
examples/ts-react-search/src/components/FilterSelect.tsx (1)
examples/ts-react-search/src/constants.ts (1)
ALL_OPTION(1-1)
examples/ts-react-search/src/features/settlements/useSettlementsQuery.ts (1)
examples/ts-react-search/src/features/settlements/types.ts (1)
SettlementsSearch(12-12)
examples/ts-react-search/src/features/disputes/DisputesManager.tsx (1)
examples/ts-react-search/src/features/disputes/types.ts (1)
DisputesSearch(15-15)
examples/ts-react-search/src/features/orders/OrdersManager.tsx (1)
examples/ts-react-search/src/features/orders/types.ts (1)
OrdersSearch(15-15)
examples/ts-react-search/src/features/disputes/DisputesFilters.tsx (4)
examples/ts-react-search/src/features/disputes/types.ts (1)
DisputesSearch(15-15)examples/ts-react-search/src/constants.ts (1)
ALL_OPTION(1-1)examples/ts-react-search/src/features/disputes/constants.ts (3)
disputesSearchSchema(45-50)DISPUTE_STATUS_MAP(12-17)DISPUTE_REASON_MAP(28-35)examples/ts-react-search/src/components/ui/date-picker.tsx (1)
DatePicker(26-66)
examples/ts-react-search/src/features/disputes/disputesCollection.ts (1)
examples/ts-react-search/src/features/disputes/constants.ts (1)
disputeSchema(37-43)
examples/ts-react-search/src/routes/_layout/settlements.tsx (2)
examples/ts-react-search/src/routes/_layout/orders.tsx (1)
Route(9-16)examples/ts-react-search/src/features/settlements/constants.ts (1)
settlementsSearchSchema(32-36)
examples/ts-react-search/src/features/settlements/types.ts (1)
examples/ts-react-search/src/features/settlements/constants.ts (3)
SETTLEMENT_CURRENCIES(5-13)settlementSchema(25-30)settlementsSearchSchema(32-36)
examples/ts-react-search/src/routes/_layout/orders.tsx (1)
examples/ts-react-search/src/features/orders/constants.ts (1)
ordersSearchSchema(43-48)
examples/ts-react-search/src/features/orders/ordersCollection.ts (1)
examples/ts-react-search/src/features/orders/constants.ts (1)
orderSchema(35-41)
examples/ts-react-search/src/features/settlements/SettlementsFilters.tsx (5)
examples/ts-react-search/src/features/settlements/types.ts (1)
SettlementsSearch(12-12)examples/ts-react-search/src/constants.ts (1)
ALL_OPTION(1-1)examples/ts-react-search/src/features/settlements/constants.ts (2)
settlementsSearchSchema(32-36)SETTLEMENT_CURRENCY_MAP(15-23)examples/ts-react-search/src/components/ui/date-picker.tsx (1)
DatePicker(26-66)examples/ts-react-search/src/components/ui/button.tsx (1)
Button(61-61)
examples/ts-react-search/src/routes/api/search.ts (5)
examples/ts-react-search/src/types.ts (1)
ISO8601UTC(1-1)examples/ts-react-search/src/features/orders/constants.ts (2)
ORDER_STATUS_MAP(13-19)PAYMENT_METHOD_MAP(28-33)examples/ts-react-search/src/features/disputes/constants.ts (2)
DISPUTE_STATUS_MAP(12-17)DISPUTE_REASON_MAP(28-35)examples/ts-react-search/src/features/settlements/constants.ts (1)
SETTLEMENT_CURRENCY_MAP(15-23)packages/typescript/ai-openai/src/index.ts (1)
openaiText(9-9)
examples/ts-react-search/src/features/settlements/data.ts (1)
examples/ts-react-search/src/features/settlements/types.ts (1)
Settlement(10-10)
examples/ts-react-search/src/routes/_layout/disputes.tsx (3)
examples/ts-react-search/src/routes/_layout/orders.tsx (1)
Route(9-16)examples/ts-react-search/src/routes/_layout/settlements.tsx (1)
Route(9-16)examples/ts-react-search/src/features/disputes/constants.ts (1)
disputesSearchSchema(45-50)
examples/ts-react-search/src/features/disputes/DisputesTable.tsx (2)
examples/ts-react-search/src/features/disputes/types.ts (1)
Dispute(13-13)examples/ts-react-search/src/components/ui/table.tsx (6)
Table(108-108)TableHeader(109-109)TableRow(113-113)TableHead(112-112)TableBody(110-110)TableCell(114-114)
examples/ts-react-search/src/features/orders/OrdersFilters.tsx (4)
examples/ts-react-search/src/features/orders/types.ts (1)
OrdersSearch(15-15)examples/ts-react-search/src/constants.ts (1)
ALL_OPTION(1-1)examples/ts-react-search/src/features/orders/constants.ts (3)
ordersSearchSchema(43-48)ORDER_STATUS_MAP(13-19)PAYMENT_METHOD_MAP(28-33)examples/ts-react-search/src/components/ui/date-picker.tsx (1)
DatePicker(26-66)
examples/ts-react-search/src/features/settlements/constants.ts (1)
examples/ts-react-search/src/features/settlements/types.ts (1)
SettlementCurrency(8-8)
examples/ts-react-search/src/features/disputes/constants.ts (1)
examples/ts-react-search/src/features/disputes/types.ts (2)
DisputeStatus(9-9)DisputeReason(11-11)
examples/ts-react-search/src/features/settlements/SettlementsManager.tsx (1)
examples/ts-react-search/src/features/settlements/types.ts (1)
SettlementsSearch(12-12)
examples/ts-react-search/src/routes/api/disputes.ts (1)
examples/ts-react-search/src/features/disputes/data.ts (1)
DISPUTES(3-74)
examples/ts-react-search/src/features/orders/constants.ts (1)
examples/ts-react-search/src/features/orders/types.ts (2)
OrderStatus(9-9)PaymentMethod(11-11)
examples/ts-react-search/src/features/orders/types.ts (1)
examples/ts-react-search/src/features/orders/constants.ts (4)
ORDER_STATUSES(5-11)PAYMENT_METHODS(21-26)orderSchema(35-41)ordersSearchSchema(43-48)
examples/ts-react-search/src/features/orders/OrdersTable.tsx (2)
examples/ts-react-search/src/features/orders/types.ts (1)
Order(13-13)examples/ts-react-search/src/components/ui/table.tsx (6)
Table(108-108)TableHeader(109-109)TableRow(113-113)TableHead(112-112)TableBody(110-110)TableCell(114-114)
examples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsx (1)
examples/ts-react-search/src/hooks/useSpeechRecognition.ts (1)
useSpeechRecognition(10-92)
examples/ts-react-search/src/routes/index.tsx (5)
examples/ts-react-search/src/routes/__root.tsx (1)
Route(15-40)examples/ts-react-search/src/routes/_layout/disputes.tsx (1)
Route(9-16)examples/ts-react-search/src/routes/_layout/orders.tsx (1)
Route(9-16)examples/ts-react-search/src/routes/_layout/settlements.tsx (1)
Route(9-16)examples/ts-react-search/src/routes/_layout/route.tsx (1)
Route(3-5)
examples/ts-react-search/src/routes/api/settlements.ts (3)
examples/ts-react-search/src/routes/api/disputes.ts (1)
Route(5-11)examples/ts-react-search/src/routes/api/orders.ts (1)
Route(5-11)examples/ts-react-search/src/features/settlements/data.ts (1)
SETTLEMENTS(3-64)
examples/ts-react-search/src/features/orders/useOrdersQuery.ts (1)
examples/ts-react-search/src/features/orders/types.ts (1)
OrdersSearch(15-15)
examples/ts-react-search/src/features/orders/data.ts (1)
examples/ts-react-search/src/features/orders/types.ts (1)
Order(13-13)
🪛 LanguageTool
examples/ts-react-search/README.md
[grammar] ~34-~34: Use a hyphen to join words.
Context: ...com/router). The initial setup is a file based router. Which means that the route...
(QB_NEW_EN_HYPHEN)
[grammar] ~125-~125: Use a hyphen to join words.
Context: ... }, }) ``` Loaders simplify your data fetching logic dramatically. Check out m...
(QB_NEW_EN_HYPHEN)
[grammar] ~129-~129: Ensure spelling is correct
Context: ...o route loading and integrating it into you application is a breeze. First add you...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[style] ~212-~212: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...ting point for your project. First you need to add TanStack Store as a dependency: ``...
(REP_NEED_TO_VB)
[style] ~287-~287: Consider removing “of” to be more concise
Context: ... # Learn More You can learn more about all of the offerings from TanStack in the [TanStac...
(ALL_OF_THE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
examples/ts-react-search/src/features/disputes/DisputesFilters.tsx
Outdated
Show resolved
Hide resolved
examples/ts-react-search/src/features/settlements/settlementsCollection.ts
Show resolved
Hide resolved
denis-shvets
force-pushed
the
ts-react-search
branch
from
720ebf6 to
993fd11
Compare
There was a problem hiding this comment.
Actionable comments posted: 10
🤖 Fix all issues with AI agents
In @examples/ts-react-search/README.md:
- Line 34: Fix grammar and style issues in the README by replacing specific
phrases: change "file based router" to "file-based router" (line containing "The
initial setup is a file based router"), correct "integrating it into you
application" to "integrating it into your application", reword the repeated
"First you need to add" (e.g., change the second occurrence to "Next, add" or
"Start by adding") to avoid repetition, and replace "all of the offerings" with
"all offerings"; update the sentences in their respective paragraphs to preserve
punctuation and capitalization.
- Around line 7-9: Update the startup command in the README examples to follow
the guidelines: replace any usage of "pnpm start" with "pnpm dev" and provide
the alternate combined form "pnpm install && pnpm dev" so users can run the
example independently; ensure both occurrences in the README (the code block
showing installation/startup) are updated accordingly.
In @examples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsx:
- Around line 26-30: The useEffect in SearchForm currently depends on transcript
but references onChange without including it in the dependency array; update the
effect declaration (the useEffect that calls onChange(transcript)) to include
onChange in the dependency array (e.g., [transcript, onChange]) so the hook
responds correctly if the onChange callback changes.
In @examples/ts-react-search/src/components/Spinner.tsx:
- Around line 3-5: The Spinner component currently returns only a decorative
LoaderCircleIcon and lacks accessibility semantics; update Spinner to provide
screen-reader information by marking the icon as decorative (aria-hidden="true")
and adding a status region (e.g., a wrapper element with role="status" and
aria-live="polite") that contains a visually hidden text node like "Loading…" so
assistive tech announces the loading state; use the existing function name
Spinner and LoaderCircleIcon to locate where to add the role/aria-live wrapper
and the sr-only text.
In @examples/ts-react-search/src/components/ui/select.tsx:
- Line 1: Remove the top-level 'use client' directive from the file—this Select
component is a pure wrapper around Radix primitives and does not use React hooks
or client-only APIs, and TanStack Start is client-first; simply delete the "'use
client'" line at the top of
examples/ts-react-search/src/components/ui/select.tsx so the Select component
(the exported Select wrapper around Radix) conforms to the project conventions.
In @examples/ts-react-search/src/features/disputes/constants.ts:
- Around line 1-4: There is a circular import between constants.ts and types.ts
because constants.ts imports DisputeReason/DisputeStatus that are actually
derived from constants here (e.g., DISPUTE_STATUSES). Fix by removing the
imports from types.ts in constants.ts, derive and export the types inline in
constants.ts (e.g., export type DisputeStatus = (typeof
DISPUTE_STATUSES)[number] and same for DisputeReason), and then update types.ts
to re-export those types from constants.ts if other modules expect them; ensure
all references use the exported types from constants.ts to break the cycle.
In @examples/ts-react-search/src/features/disputes/DisputesFilters.tsx:
- Around line 70-76: The id prop on the FilterSelect component is misspelled;
change id="resason" to id="reason" in the FilterSelect usage (the component that
sets id, label="Reason", value={pendingReason}, onChange={setPendingReason},
options={Object.entries(DISPUTE_REASON_MAP)}) so the id matches the label and
other logic that may reference "reason".
In @examples/ts-react-search/src/features/settlements/useSettlementsQuery.ts:
- Around line 5-19: The where-clause uses nullish coalescing which creates
tautologies (e.g., eq(settlement.currency, search.currency ??
settlement.currency)) so filters never apply; update useSettlementsQuery (and
analogously useOrdersQuery and useDisputesQuery) to build the predicate list
conditionally: inside the useLiveQuery callback, assemble an array of condition
expressions only when search.currency, search.from, search.to (or their
equivalents) are defined and then pass that array into and(...) (or call and
with spread of the filtered array); ensure you reference settlementsCollection
and the settlement alias when creating the conditional predicates so undefined
search fields are not turned into self-comparisons.
In @examples/ts-react-search/src/routes/__root.tsx:
- Around line 48-49: The Tailwind gradient class names on the root JSX elements
are misspelled: replace `bg-linear-to-b` with `bg-gradient-to-b` on the <body>
element and replace `bg-linear-to-r` with `bg-gradient-to-r` on the container
<div> (look for the elements using those className strings) so the gradients
render correctly.
In @examples/ts-react-search/src/types.ts:
- Line 1: Remove the unused exported type ISO8601UTC: delete the line "export
type ISO8601UTC = 'ISO-8601 UTC'" from the types file and ensure no other code
relies on ISO8601UTC; if any references exist, replace them with the appropriate
concrete type or remove those references before deleting the export.
🧹 Nitpick comments (7)
examples/ts-react-search/README.md (1)
1-90: Add context-specific information about this AI search example.The README is generic boilerplate and doesn't explain what this example demonstrates. Consider adding a brief introduction describing the AI-powered natural language search functionality, the domain (orders, disputes, settlements), and key features. This helps users understand the example's purpose without reading through generic setup instructions.
examples/ts-react-search/src/components/Spinner.tsx (1)
3-5: Consider making the component more flexible.The spinner could accept props for customization (e.g., size, className, label) to improve reusability across different contexts.
♻️ Example implementation with props
interface SpinnerProps { size?: string className?: string label?: string } function Spinner({ size = 'size-4', className = '', label = 'Loading' }: SpinnerProps) { return ( <div role="status" aria-live="polite" aria-label={label}> <LoaderCircleIcon className={`animate-spin m-auto ${size} ${className}`} aria-hidden="true" /> </div> ) }examples/ts-react-search/src/constants.ts (1)
1-1: Consider aligning with camelCase naming per coding guidelines.The coding guidelines specify camelCase for variable names throughout the codebase. However, the codebase uses SCREAMING_SNAKE_CASE for constants (e.g.,
CHAT_KEY,OPENAI_CHAT_MODELS), so this is an optional alignment rather than a strict violation.♻️ Proposed refactor to camelCase
-export const ALL_OPTION = 'ALL' +export const allOption = 'ALL'examples/ts-react-search/src/components/ui/date-picker.tsx (1)
68-72: Timezone mismatch insafeParsemay shift dates.
safeParseextracts UTC components from the parsed date but constructs a localDateobject. When the Calendar displays this, it interprets it as a local date. If the user's timezone is behind UTC, an ISO string like"2024-01-15T00:00:00Z"will be parsed as2024-01-14locally, causing the displayed date to be off by one day.Consider keeping the date in UTC consistently or using local components:
♻️ Suggested fix using local date interpretation
function safeParse(value: string) { const date = new Date(value) if (Number.isNaN(date.getTime())) return undefined - return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()) + // Keep as-is if you want the calendar to show the UTC date as local, + // or use local components if the ISO string represents local midnight: + return new Date(date.getFullYear(), date.getMonth(), date.getDate()) }examples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsx (2)
60-68: Add accessibility attributes to the voice input button.The voice input button lacks an accessible name and toggle state indicators, making it difficult for screen reader users to understand its purpose and state.
♿ Proposed accessibility improvements
<button className="absolute inset-y-3 end-12 flex size-8 items-center justify-center transition-[color,box-shadow,background-color] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[active=true]:text-blue-600 disabled:pointer-events-none disabled:opacity-40 cursor-pointer bg-input/70 hover:bg-input/50 rounded-full" type="button" data-active={listening} disabled={isLoading} onClick={handleVoiceOverClick} + aria-label={listening ? 'Stop voice input' : 'Start voice input'} + aria-pressed={listening} > <MicIcon className="size-4" /> </button>
69-79: Add an accessible label to the submit button.The submit button lacks an accessible name. While submit buttons in forms have some implicit context, an explicit label improves the experience for screen reader users.
♿ Proposed accessibility improvement
<button className="absolute inset-y-0 end-0 flex h-full w-11 items-center justify-center rounded-e-2xl text-muted-foreground/80 transition-[color,box-shadow,background-color] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer pr-2" type="submit" disabled={!hasValue || isLoading} + aria-label={isLoading ? 'Searching...' : 'Submit search'} > {isLoading ? ( <LoaderCircleIcon className="size-4 animate-spin" /> ) : ( <ArrowRightIcon className="size-4" /> )} </button>examples/ts-react-search/src/components/ui/select.tsx (1)
27-50: Consider forwarding refs for better composability.Components like
SelectTrigger,SelectContent,SelectLabel, andSelectItemwould benefit from ref forwarding usingReact.forwardRef. This allows parent components to access the underlying DOM elements when needed, improving composability and enabling use cases like focus management, measurements, and imperative DOM operations.♻️ Example refactor for SelectTrigger with ref forwarding
-function SelectTrigger({ +const SelectTrigger = React.forwardRef< + React.ElementRef<typeof SelectPrimitive.Trigger>, + React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> +>(function SelectTrigger({ className, children, ...props -}: React.ComponentProps<typeof SelectPrimitive.Trigger>) { +}, ref) { return ( <SelectPrimitive.Trigger + ref={ref} className={cn( 'flex h-11 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-foreground text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:aria-invalid:ring-destructive/40 [&>span]:line-clamp-1 [&_svg]:pointer-events-none [&_svg]:shrink-0 dark:hover:bg-input/50 dark:bg-input/30', className, )} data-slot="select-trigger" {...props} > {children} <SelectPrimitive.Icon asChild> <ChevronDownIcon className="shrink-0 in-aria-invalid:text-destructive/80 text-muted-foreground/80" size={16} /> </SelectPrimitive.Icon> </SelectPrimitive.Trigger> ) -} +})Apply similar patterns to
SelectContent,SelectLabel, andSelectItemfor consistency.Also applies to: 52-84, 86-100, 102-124
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
examples/ts-react-search/public/favicon.icois excluded by!**/*.icoexamples/ts-react-search/public/logo192.pngis excluded by!**/*.pngexamples/ts-react-search/public/logo512.pngis excluded by!**/*.pngexamples/ts-react-search/public/tanstack-circle-logo.pngis excluded by!**/*.pngexamples/ts-react-search/public/tanstack-word-logo-white.svgis excluded by!**/*.svgexamples/ts-react-search/src/logo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (74)
examples/ts-react-search/.cta.jsonexamples/ts-react-search/.gitignoreexamples/ts-react-search/.vscode/settings.jsonexamples/ts-react-search/README.mdexamples/ts-react-search/package.jsonexamples/ts-react-search/public/manifest.jsonexamples/ts-react-search/public/robots.txtexamples/ts-react-search/src/components/FilterSelect.tsxexamples/ts-react-search/src/components/HeroSection/Brand.tsxexamples/ts-react-search/src/components/HeroSection/HeroSection.tsxexamples/ts-react-search/src/components/HeroSection/Navigation.tsxexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/components/HeroSection/Search/Search.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/components/HeroSection/Search/index.tsexamples/ts-react-search/src/components/HeroSection/index.tsexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/components/TableSummary.tsxexamples/ts-react-search/src/components/ui/README.mdexamples/ts-react-search/src/components/ui/button.tsxexamples/ts-react-search/src/components/ui/calendar.tsxexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/components/ui/label.tsxexamples/ts-react-search/src/components/ui/popover.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/features/disputes/DisputesFilters.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/disputes/types.tsexamples/ts-react-search/src/features/disputes/useDisputesQuery.tsexamples/ts-react-search/src/features/orders/OrdersFilters.tsxexamples/ts-react-search/src/features/orders/OrdersManager.tsxexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/features/orders/data.tsexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/features/orders/types.tsexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/features/settlements/SettlementsTable.tsxexamples/ts-react-search/src/features/settlements/constants.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/features/settlements/settlementsCollection.tsexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/hooks/useSpeechRecognition.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/router.tsxexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/routes/_layout/route.tsxexamples/ts-react-search/src/routes/_layout/settlements.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/routes/api/search.tsexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/routes/index.tsxexamples/ts-react-search/src/speech.d.tsexamples/ts-react-search/src/styles.cssexamples/ts-react-search/src/types.tsexamples/ts-react-search/src/utils/cn.tsexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/tsconfig.jsonexamples/ts-react-search/vite.config.ts
✅ Files skipped from review due to trivial changes (1)
- examples/ts-react-search/.vscode/settings.json
🚧 Files skipped from review as they are similar to previous changes (51)
- examples/ts-react-search/.gitignore
- examples/ts-react-search/src/components/ui/label.tsx
- examples/ts-react-search/src/components/HeroSection/Navigation.tsx
- examples/ts-react-search/src/components/HeroSection/index.ts
- examples/ts-react-search/src/queryClient.ts
- examples/ts-react-search/src/features/orders/types.ts
- examples/ts-react-search/src/routes/index.tsx
- examples/ts-react-search/src/components/ui/calendar.tsx
- examples/ts-react-search/src/router.tsx
- examples/ts-react-search/src/components/HeroSection/Search/index.ts
- examples/ts-react-search/src/routes/_layout/orders.tsx
- examples/ts-react-search/public/manifest.json
- examples/ts-react-search/src/components/FilterSelect.tsx
- examples/ts-react-search/src/routes/_layout/route.tsx
- examples/ts-react-search/src/features/settlements/constants.ts
- examples/ts-react-search/src/components/HeroSection/HeroSection.tsx
- examples/ts-react-search/package.json
- examples/ts-react-search/src/utils/cn.ts
- examples/ts-react-search/src/features/orders/data.ts
- examples/ts-react-search/src/routes/_layout/disputes.tsx
- examples/ts-react-search/src/features/orders/useOrdersQuery.ts
- examples/ts-react-search/vite.config.ts
- examples/ts-react-search/src/routes/_layout/settlements.tsx
- examples/ts-react-search/src/features/disputes/types.ts
- examples/ts-react-search/src/features/disputes/data.ts
- examples/ts-react-search/src/features/orders/ordersCollection.ts
- examples/ts-react-search/src/utils/formatDate.ts
- examples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsx
- examples/ts-react-search/src/features/orders/OrdersManager.tsx
- examples/ts-react-search/tsconfig.json
- examples/ts-react-search/src/components/ui/button.tsx
- examples/ts-react-search/.cta.json
- examples/ts-react-search/src/features/orders/constants.ts
- examples/ts-react-search/src/components/HeroSection/Brand.tsx
- examples/ts-react-search/src/routes/api/search.ts
- examples/ts-react-search/src/routes/api/settlements.ts
- examples/ts-react-search/src/styles.css
- examples/ts-react-search/src/features/settlements/SettlementsTable.tsx
- examples/ts-react-search/public/robots.txt
- examples/ts-react-search/src/speech.d.ts
- examples/ts-react-search/src/components/HeroSection/Search/Search.tsx
- examples/ts-react-search/src/features/settlements/SettlementsFilters.tsx
- examples/ts-react-search/src/features/orders/OrdersFilters.tsx
- examples/ts-react-search/src/features/disputes/useDisputesQuery.ts
- examples/ts-react-search/src/features/settlements/SettlementsManager.tsx
- examples/ts-react-search/src/components/ui/popover.tsx
- examples/ts-react-search/src/hooks/useSpeechRecognition.ts
- examples/ts-react-search/src/components/ui/README.md
- examples/ts-react-search/src/features/settlements/settlementsCollection.ts
- examples/ts-react-search/src/components/HeroSection/ProjectDescription.tsx
- examples/ts-react-search/src/components/TableSummary.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from/adapterssubpath rather than monolithic adapters
Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions withtoolDefinition()and Zod schema inference
Implement isomorphic tool system usingtoolDefinition()with.server()and.client()implementations for dual-environment execution
Use type-safe per-model configuration with provider options typed based on selected model to ensure compile-time safety
Implement stream processing with StreamProcessor for handling chunked responses and support partial JSON parsing for streaming AI responses
Files:
examples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/types.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/features/disputes/DisputesFilters.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for function and variable names throughout the codebase
Files:
examples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/types.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/features/disputes/DisputesFilters.tsx
examples/**
📄 CodeRabbit inference engine (CLAUDE.md)
Examples are not built by Nx and should be run independently from their directories with
pnpm devorpnpm install && pnpm dev
Files:
examples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/types.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/features/disputes/DisputesFilters.tsxexamples/ts-react-search/README.md
🧠 Learnings (6)
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions with `toolDefinition()` and Zod schema inference
Applied to files:
examples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/features/disputes/constants.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
Applied to files:
examples/ts-react-search/src/routeTree.gen.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from `/adapters` subpath rather than monolithic adapters
Applied to files:
examples/ts-react-search/src/routeTree.gen.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/adapters/*.ts : Create individual adapter implementations for each provider capability (text, embed, summarize, image) with separate exports to enable tree-shaking
Applied to files:
examples/ts-react-search/src/routeTree.gen.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to .eslintrc* : Use ESLint with custom TanStack config for linting all TypeScript and JavaScript files
Applied to files:
examples/ts-react-search/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Implement framework integrations using the headless `tanstack/ai-client` for state management with framework-specific hooks (useChat) on top
Applied to files:
examples/ts-react-search/README.md
🧬 Code graph analysis (12)
examples/ts-react-search/src/features/disputes/disputesCollection.ts (1)
examples/ts-react-search/src/features/disputes/constants.ts (1)
disputeSchema(37-43)
examples/ts-react-search/src/features/settlements/types.ts (1)
examples/ts-react-search/src/features/settlements/constants.ts (3)
SETTLEMENT_CURRENCIES(5-13)settlementSchema(25-30)settlementsSearchSchema(32-36)
examples/ts-react-search/src/features/settlements/data.ts (1)
examples/ts-react-search/src/features/settlements/types.ts (1)
Settlement(10-10)
examples/ts-react-search/src/components/ui/date-picker.tsx (4)
examples/ts-react-search/src/components/ui/label.tsx (1)
Label(24-24)examples/ts-react-search/src/components/ui/popover.tsx (3)
Popover(56-56)PopoverTrigger(56-56)PopoverContent(56-56)examples/ts-react-search/src/components/ui/button.tsx (1)
Button(61-61)examples/ts-react-search/src/components/ui/calendar.tsx (1)
Calendar(92-92)
examples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsx (1)
examples/ts-react-search/src/hooks/useSpeechRecognition.ts (1)
useSpeechRecognition(10-92)
examples/ts-react-search/src/features/disputes/DisputesManager.tsx (1)
examples/ts-react-search/src/features/disputes/types.ts (1)
DisputesSearch(15-15)
examples/ts-react-search/src/features/disputes/constants.ts (1)
examples/ts-react-search/src/features/disputes/types.ts (2)
DisputeStatus(9-9)DisputeReason(11-11)
examples/ts-react-search/src/routes/__root.tsx (2)
examples/ts-react-search/src/routes/_layout/route.tsx (1)
Route(3-5)examples/ts-react-search/src/routes/index.tsx (1)
Route(3-3)
examples/ts-react-search/src/features/settlements/useSettlementsQuery.ts (1)
examples/ts-react-search/src/features/settlements/types.ts (1)
SettlementsSearch(12-12)
examples/ts-react-search/src/features/orders/OrdersTable.tsx (2)
examples/ts-react-search/src/features/orders/types.ts (1)
Order(13-13)examples/ts-react-search/src/components/ui/table.tsx (6)
Table(108-108)TableHeader(109-109)TableRow(113-113)TableHead(112-112)TableBody(110-110)TableCell(114-114)
examples/ts-react-search/src/features/disputes/DisputesTable.tsx (2)
examples/ts-react-search/src/features/disputes/types.ts (1)
Dispute(13-13)examples/ts-react-search/src/components/ui/table.tsx (6)
Table(108-108)TableHeader(109-109)TableRow(113-113)TableHead(112-112)TableBody(110-110)TableCell(114-114)
examples/ts-react-search/src/features/disputes/DisputesFilters.tsx (5)
examples/ts-react-search/src/features/disputes/types.ts (1)
DisputesSearch(15-15)examples/ts-react-search/src/constants.ts (1)
ALL_OPTION(1-1)examples/ts-react-search/src/features/disputes/constants.ts (3)
disputesSearchSchema(45-50)DISPUTE_STATUS_MAP(12-17)DISPUTE_REASON_MAP(28-35)examples/ts-react-search/src/components/ui/date-picker.tsx (1)
DatePicker(26-66)examples/ts-react-search/src/components/ui/button.tsx (1)
Button(61-61)
🪛 LanguageTool
examples/ts-react-search/README.md
[grammar] ~34-~34: Use a hyphen to join words.
Context: ...com/router). The initial setup is a file based router. Which means that the route...
(QB_NEW_EN_HYPHEN)
[grammar] ~125-~125: Use a hyphen to join words.
Context: ... }, }) ``` Loaders simplify your data fetching logic dramatically. Check out m...
(QB_NEW_EN_HYPHEN)
[grammar] ~129-~129: Ensure spelling is correct
Context: ...o route loading and integrating it into you application is a breeze. First add you...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[style] ~212-~212: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...ting point for your project. First you need to add TanStack Store as a dependency: ``...
(REP_NEED_TO_VB)
[style] ~287-~287: Consider removing “of” to be more concise
Context: ... # Learn More You can learn more about all of the offerings from TanStack in the [TanStac...
(ALL_OF_THE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
🔇 Additional comments (19)
examples/ts-react-search/src/components/ui/date-picker.tsx (1)
26-66: LGTM!The component is well-structured with proper accessibility (label association via
useId), clean composition of UI primitives, and sensible defaults. The use offormatDatefor display and ISO strings for data exchange is a good pattern.examples/ts-react-search/src/features/orders/OrdersTable.tsx (1)
16-54: LGTM!The component follows good patterns: proper empty state handling with matching
colSpan, semantic table structure, and consistent use of the sharedformatDateutility. The use ofkey={order.id}ensures stable rendering.examples/ts-react-search/src/features/disputes/constants.ts (1)
37-50: Good use of Zod for runtime schema validation.The schema definitions follow the coding guidelines for using Zod with proper enum validation and the
fallbackadapter for optional search parameters. The use ofz.iso.datetime()for date fields ensures proper ISO format validation.examples/ts-react-search/src/components/ui/table.tsx (1)
7-105: LGTM!Well-structured table primitives with proper TypeScript typing via
React.ComponentProps, clean class composition usingcn(), and consistentdata-slotattributes for styling/testing hooks. The responsive wrapper inTableis a good accessibility pattern.examples/ts-react-search/src/routeTree.gen.ts (1)
1-10: Auto-generated file - no review needed.This file is auto-generated by TanStack Router as indicated by the header comments. Manual changes would be overwritten, and the file is excluded from linting/formatting by design.
examples/ts-react-search/src/utils/getBaseUrl.ts (1)
1-7: LGTM!Clean isomorphic utility that correctly handles browser vs. server environments. Returning an empty string for browser enables relative URLs (same-origin requests), while server-side gets a full URL for internal API calls during SSR.
examples/ts-react-search/src/routes/api/orders.ts (1)
5-11: LGTM!Simple API route for the example. The hardcoded data approach aligns with the PR objectives noting this is intentional for now, with plans to migrate to TanStack Query or TanStack DB later.
examples/ts-react-search/src/features/disputes/DisputesTable.tsx (1)
16-56: LGTM!The table component is well-structured with proper empty state handling, appropriate use of Table UI components, and correct date formatting. The column layout correctly maps to the dispute schema fields.
examples/ts-react-search/src/routes/api/disputes.ts (1)
5-11: LGTM!The API route follows the established pattern for serving data endpoints and correctly returns the DISPUTES dataset via the GET handler.
examples/ts-react-search/src/features/disputes/disputesCollection.ts (1)
8-20: LGTM!The collection is properly configured with appropriate query options, Zod schema validation (per coding guidelines), and correct item identification via the
getKeyfunction.examples/ts-react-search/src/features/disputes/DisputesManager.tsx (1)
20-20: No issue found –toArrayis a property getter, not a method.The code correctly accesses
toArrayas a property. According to the @tanstack/react-db Collection API,toArrayis a getter that returns an array directly (get toArray(): T[]), not a method that requires invocation. The usagedisputesCollection.toArray.lengthis correct.Likely an incorrect or invalid review comment.
examples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsx (2)
15-20: Consider exportingSearchFormPropsif it's part of the public API.The AI summary mentions that
SearchFormPropsis a public exported type, but it's currently not exported. If consumers of this component need access to these prop types, add an export.📦 Proposed export addition
-type SearchFormProps = { +export type SearchFormProps = { value: string onChange: (value: string) => void onSubmit: (event: FormEvent) => void isLoading: boolean }
1-1: The'use client'directive is appropriate and necessary for this component. TanStack Start supports React's'use client'directive for marking components that require client-side execution. The SearchForm component uses theuseSpeechRecognitionhook, which is browser-dependent and requires client-side rendering. This directive is used consistently throughout the example project and is not a leftover artifact.Likely an incorrect or invalid review comment.
examples/ts-react-search/src/components/ui/select.tsx (2)
175-186: LGTM!All component exports are properly listed and match the components defined in the file.
4-4: No action needed. The import statement is correct.The
radix-uipackage (version ^1.4.3) is properly installed in the project dependencies. The importimport { Select as SelectPrimitive } from 'radix-ui'is the correct way to access the Select component from this package. The proposed change to import from@radix-ui/react-selectwould cause a module resolution error since that package is not installed in this project.Likely an incorrect or invalid review comment.
examples/ts-react-search/src/features/settlements/useSettlementsQuery.ts (2)
1-3: LGTM: Imports are clean and well-organized.The imports follow camelCase naming conventions and correctly import the necessary utilities from
@tanstack/react-db.
21-21: LGTM: Export follows conventions.The default export follows camelCase naming conventions.
examples/ts-react-search/src/features/settlements/types.ts (1)
1-12: LGTM: Proper use of Zod type inference.This file correctly uses Zod's
z.inferfor type derivation, which aligns with the coding guidelines. The type definitions are clean and follow best practices.Based on coding guidelines, Zod should be used for runtime schema validation and type inference.
examples/ts-react-search/src/features/settlements/data.ts (1)
1-64: LGTM: Clean mock data structure.The static settlement data is properly typed and provides reasonable test data for the example. The structure is consistent across all entries.
examples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsx
Outdated
Show resolved
Hide resolved
examples/ts-react-search/src/features/settlements/useSettlementsQuery.ts
Show resolved
Hide resolved
denis-shvets
force-pushed
the
ts-react-search
branch
from
993fd11 to
f43c9b4
Compare
There was a problem hiding this comment.
Actionable comments posted: 10
🤖 Fix all issues with AI agents
In @examples/ts-react-search/README.md:
- Line 129: Fix the typo in the README sentence that currently reads
"React-Query is an excellent addition or alternative to route loading and
integrating it into you application is a breeze." by replacing "you application"
with "your application" so the sentence reads "...into your application is a
breeze."
- Line 34: Update the README sentence to hyphenate the compound adjective:
change "file based router" to "file-based router" in the line describing the
initial setup so it reads "The initial setup is a file-based router." This fixes
the compound-adjective grammar while leaving the surrounding text unchanged.
- Line 125: Update the sentence "Loaders simplify your data fetching logic
dramatically." to use the compound adjective form by inserting a hyphen: change
"data fetching logic" to "data-fetching logic" (so it reads "Loaders simplify
your data-fetching logic dramatically."); no other changes needed.
- Around line 8-9: The README currently instructs "pnpm start" which doesn't
exist in package.json; update the startup command to "pnpm dev" so it matches
the actual script ("vite dev --port 3000") defined in package.json and project
example guidelines; edit the README line showing the two commands (the lines
with "pnpm install" and "pnpm start") to replace "pnpm start" with "pnpm dev".
In @examples/ts-react-search/src/features/settlements/SettlementsManager.tsx:
- Around line 19-22: The code uses settlementsCollection.toArray as a property
when computing totalCount; call the method instead. Update the TableSummary prop
to use settlementsCollection.toArray() so totalCount invokes the toArray()
function (and keep resultCount={settlements.length} unchanged), ensuring
settlementsCollection.toArray() is executed to return the array length.
In @examples/ts-react-search/src/hooks/useSpeechRecognition.ts:
- Around line 75-79: startListening currently calls
recognitionRef.current?.start() unconditionally which will throw
InvalidStateError if recognition is already active; add a guard in
startListening that returns early when recognition is already running by
checking a listening flag (e.g., add a listeningRef or isListening state updated
in recognition.onstart and recognition.onend) or by checking a custom property
on recognitionRef.current, then only call recognitionRef.current.start() when
not already listening; update the recognition onstart/onend handlers to
set/reset this flag so repeated calls to startListening are safe.
- Line 73: The effect in useSpeechRecognition re-triggers whenever the whole
options object identity changes (currently using [options?.lang,
options?.continuous, options?.interimResults]), which can still cause
re-initialization if options is recreated; destructure the primitive values from
options (e.g., const { lang, continuous, interimResults } = options ?? {})
outside the effect and use those primitives in the effect dependency array so
React compares by value, or alternatively store options in a ref and apply
changes only when individual values differ; update the effect to reference those
primitive names (lang, continuous, interimResults) instead of options to avoid
unnecessary teardown/recreation of the SpeechRecognition instance.
In @examples/ts-react-search/src/routes/__root.tsx:
- Around line 48-49: Replace the invalid Tailwind utility names used in the root
JSX: in the <body> element's className change "bg-linear-to-b" to
"bg-gradient-to-b" and in the surrounding <div> element's className change
"bg-linear-to-r" to "bg-gradient-to-r" so the gradient backgrounds render
correctly.
In @examples/ts-react-search/src/styles.css:
- Around line 9-10: The CSS defines --font-sans and --font-mono by pointing them
at undefined variables (--font-geist-sans, --font-geist-mono), so Tailwind's
font-sans/font-mono will be empty; fix by either defining the geist variables
(e.g., add :root { --font-geist-sans: "Inter, system-ui, sans-serif";
--font-geist-mono: "ui-monospace, SFMono-Regular, monospace"; }) or replace the
mappings to use concrete fallbacks directly (e.g., --font-sans: "Inter,
system-ui, sans-serif"; --font-mono: "ui-monospace, SFMono-Regular,
monospace";), or remove these custom variables if Geist fonts are not used.
In @examples/ts-react-search/src/utils/formatDate.ts:
- Around line 1-8: The formatDate function should validate the parsed date and
handle invalid inputs: inside formatDate, construct the Date object from the
input string (new Date(date)), check its validity (e.g.,
isNaN(dateObj.getTime()) or Number.isNaN(...)), and if invalid return a safe
placeholder (empty string or a short dash) instead of letting
Intl.DateTimeFormat render "Invalid Date"; otherwise format the valid date with
the existing Intl.DateTimeFormat options. Also guard the formatter call in a
try/catch to return the same placeholder on unexpected errors.
🧹 Nitpick comments (10)
examples/ts-react-search/README.md (2)
212-212: Replace repetitive phrasing for better readability.The phrase "First you need to add" echoes similar construction used earlier. Consider more varied wording.
♻️ Proposed improvement
- First you need to add TanStack Store as a dependency: + Add TanStack Store as a dependency:
287-287: Remove "of" for conciseness."all of the offerings" is more verbose than necessary; use "all the offerings" instead.
♻️ Proposed improvement
- You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com). + You can learn more about all the offerings from TanStack in the [TanStack documentation](https://tanstack.com).examples/ts-react-search/src/routes/__root.tsx (1)
39-39: Consider enhancing the Not Found component.The current implementation is minimal. Consider adding better UX with styled content, navigation back to home, or a helpful message.
♻️ Optional enhancement
- notFoundComponent: () => <h1>Not Found</h1>, + notFoundComponent: () => ( + <div className="flex flex-col items-center justify-center min-h-screen text-white"> + <h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1> + <p className="text-gray-400 mb-8">The page you're looking for doesn't exist.</p> + <a href="/" className="text-cyan-400 hover:text-cyan-300 underline"> + Return to Home + </a> + </div> + ),examples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsx (1)
20-45: Consider simplifying the click handler and improving key uniqueness.Two optional refinements:
- Simplify click handler: The
makePromptClickHandlerfunction can be inlined to reduce unnecessary closures.- Improve key prop: Using
promptas the key (line 32) assumes prompts are unique. Consider using a combination oflocaleandprompt, or the array index, for better uniqueness guarantees.♻️ Proposed refactor
function QuickPrompts({ onClick }: QuickPromptsProps) { - function makePromptClickHandler(value: string) { - return () => onClick(value) - } - return ( <div className="space-y-2"> <p className="text-center text-sm text-muted-foreground"> Quick prompts: </p> <ul className="flex flex-wrap justify-center gap-2"> - {PROMPTS.map(({ prompt, locale }) => ( - <li key={prompt}> + {PROMPTS.map(({ prompt, locale }, index) => ( + <li key={`${locale}-${index}`}> <button className="text-sm px-2 py-1 rounded bg-slate-700 text-cyan-400 cursor-pointer hover:bg-slate-600 transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50" type="button" - onClick={makePromptClickHandler(prompt)} + onClick={() => onClick(prompt)} > {locale} • {prompt} </button> </li> ))} </ul> </div> ) }examples/ts-react-search/src/hooks/useSpeechRecognition.ts (2)
21-24: Consider exposing browser support status.When SpeechRecognition is unsupported, the error is set but the controls are still returned. Consumers might render UI elements that silently do nothing when clicked. Consider exposing an
isSupportedboolean to help consumers handle this case explicitly.♻️ Proposed enhancement
+ const [isSupported, setIsSupported] = useState(true) + useEffect(() => { const SpeechRecognitionCtor = window.SpeechRecognition || window.webkitSpeechRecognition if (!SpeechRecognitionCtor) { setError('SpeechRecognition is not supported in this browser.') + setIsSupported(false) return } // ... rest of setup }, [options?.lang, options?.continuous, options?.interimResults]) // ... rest of hook return { listening, transcript, error, + isSupported, startListening, stopListening, }Also applies to: 85-91
75-83: Consider using useCallback for stable function references.The
startListeningandstopListeningfunctions are recreated on every render. While not critical, wrapping them inuseCallbackwould provide stable references and prevent unnecessary re-renders if consumers use these functions in dependency arrays or pass them as props to memoized child components.♻️ Optional: Wrap in useCallback
+ const startListening = useCallback(() => { - const startListening = () => { setTranscript('') setError(null) recognitionRef.current?.start() - } + }, []) + const stopListening = useCallback(() => { - const stopListening = () => { recognitionRef.current?.stop() - }, []) + }examples/ts-react-search/src/utils/formatDate.ts (1)
2-7: Consider externalizing locale configuration for i18n support.The locale is hardcoded to
'en-GB'. For an example demonstrating best practices, consider accepting locale as an optional parameter or reading it from a configuration/context to support internationalization.♻️ Optional refactor to support configurable locale
-function formatDate(date: string) { - return new Intl.DateTimeFormat('en-GB', { +function formatDate(date: string, locale: string = 'en-GB') { + return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'short', day: '2-digit', timeZone: 'UTC', }).format(new Date(date)) }examples/ts-react-search/src/components/ui/table.tsx (1)
1-1: Consider whether 'use client' directive is necessary.The
'use client'directive marks this module for client-side execution in React Server Components. Since these are basic presentational primitives without interactive state or browser APIs, they could potentially run on the server. Verify if this directive is required in your TanStack Start setup.examples/ts-react-search/src/queryClient.ts (1)
3-3: Consider configuring QueryClient defaults for better UX.The QueryClient is instantiated with default options. For a production-like example, consider configuring defaults such as
staleTime,gcTime(formerlycacheTime), andretrybehavior to demonstrate best practices.♻️ Example configuration
-const queryClient = new QueryClient() +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 1000 * 60 * 5, // 5 minutes + gcTime: 1000 * 60 * 10, // 10 minutes + retry: 1, + }, + }, +})examples/ts-react-search/src/routes/_layout/disputes.tsx (1)
23-23: Consider if remountingDisputesFilterson search change is necessary.Using
key={JSON.stringify(search)}forces a full component remount whenever any search parameter changes. If the filter inputs are controlled components that derive their values from thesearchprop, this remount may be unnecessary and could cause brief UI flicker or reset any local component state.If the remount is intentional (e.g., to reset internal focus or validation state), consider adding a brief comment to document this intent.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
examples/ts-react-search/public/favicon.icois excluded by!**/*.icoexamples/ts-react-search/public/logo192.pngis excluded by!**/*.pngexamples/ts-react-search/public/logo512.pngis excluded by!**/*.pngexamples/ts-react-search/public/tanstack-circle-logo.pngis excluded by!**/*.pngexamples/ts-react-search/public/tanstack-word-logo-white.svgis excluded by!**/*.svgexamples/ts-react-search/src/logo.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (74)
examples/ts-react-search/.cta.jsonexamples/ts-react-search/.gitignoreexamples/ts-react-search/.vscode/settings.jsonexamples/ts-react-search/README.mdexamples/ts-react-search/package.jsonexamples/ts-react-search/public/manifest.jsonexamples/ts-react-search/public/robots.txtexamples/ts-react-search/src/components/FilterSelect.tsxexamples/ts-react-search/src/components/HeroSection/Brand.tsxexamples/ts-react-search/src/components/HeroSection/HeroSection.tsxexamples/ts-react-search/src/components/HeroSection/Navigation.tsxexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/components/HeroSection/Search/Search.tsxexamples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsxexamples/ts-react-search/src/components/HeroSection/Search/index.tsexamples/ts-react-search/src/components/HeroSection/index.tsexamples/ts-react-search/src/components/Spinner.tsxexamples/ts-react-search/src/components/TableSummary.tsxexamples/ts-react-search/src/components/ui/README.mdexamples/ts-react-search/src/components/ui/button.tsxexamples/ts-react-search/src/components/ui/calendar.tsxexamples/ts-react-search/src/components/ui/date-picker.tsxexamples/ts-react-search/src/components/ui/label.tsxexamples/ts-react-search/src/components/ui/popover.tsxexamples/ts-react-search/src/components/ui/select.tsxexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/features/disputes/DisputesFilters.tsxexamples/ts-react-search/src/features/disputes/DisputesManager.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/features/disputes/constants.tsexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/disputes/types.tsexamples/ts-react-search/src/features/disputes/useDisputesQuery.tsexamples/ts-react-search/src/features/orders/OrdersFilters.tsxexamples/ts-react-search/src/features/orders/OrdersManager.tsxexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/features/orders/data.tsexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/features/orders/types.tsexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/features/settlements/SettlementsTable.tsxexamples/ts-react-search/src/features/settlements/constants.tsexamples/ts-react-search/src/features/settlements/data.tsexamples/ts-react-search/src/features/settlements/settlementsCollection.tsexamples/ts-react-search/src/features/settlements/types.tsexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/hooks/useSpeechRecognition.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/router.tsxexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/routes/_layout/route.tsxexamples/ts-react-search/src/routes/_layout/settlements.tsxexamples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/routes/api/orders.tsexamples/ts-react-search/src/routes/api/search.tsexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/routes/index.tsxexamples/ts-react-search/src/speech.d.tsexamples/ts-react-search/src/styles.cssexamples/ts-react-search/src/types.tsexamples/ts-react-search/src/utils/cn.tsexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/utils/getBaseUrl.tsexamples/ts-react-search/tsconfig.jsonexamples/ts-react-search/vite.config.ts
✅ Files skipped from review due to trivial changes (1)
- examples/ts-react-search/.vscode/settings.json
🚧 Files skipped from review as they are similar to previous changes (48)
- examples/ts-react-search/src/features/orders/OrdersManager.tsx
- examples/ts-react-search/src/components/HeroSection/Search/index.ts
- examples/ts-react-search/package.json
- examples/ts-react-search/src/routes/api/orders.ts
- examples/ts-react-search/src/features/disputes/useDisputesQuery.ts
- examples/ts-react-search/src/components/HeroSection/HeroSection.tsx
- examples/ts-react-search/src/components/ui/calendar.tsx
- examples/ts-react-search/src/components/HeroSection/Search/Search.tsx
- examples/ts-react-search/src/features/settlements/SettlementsTable.tsx
- examples/ts-react-search/src/features/orders/OrdersFilters.tsx
- examples/ts-react-search/src/components/ui/button.tsx
- examples/ts-react-search/vite.config.ts
- examples/ts-react-search/src/features/orders/types.ts
- examples/ts-react-search/src/router.tsx
- examples/ts-react-search/src/features/settlements/constants.ts
- examples/ts-react-search/src/components/ui/date-picker.tsx
- examples/ts-react-search/.gitignore
- examples/ts-react-search/public/robots.txt
- examples/ts-react-search/src/features/settlements/settlementsCollection.ts
- examples/ts-react-search/src/components/TableSummary.tsx
- examples/ts-react-search/src/components/ui/popover.tsx
- examples/ts-react-search/.cta.json
- examples/ts-react-search/src/routes/_layout/settlements.tsx
- examples/ts-react-search/src/features/orders/data.ts
- examples/ts-react-search/src/components/ui/README.md
- examples/ts-react-search/src/components/HeroSection/Brand.tsx
- examples/ts-react-search/src/components/ui/label.tsx
- examples/ts-react-search/src/components/Spinner.tsx
- examples/ts-react-search/src/features/settlements/types.ts
- examples/ts-react-search/src/routes/api/search.ts
- examples/ts-react-search/src/features/disputes/types.ts
- examples/ts-react-search/public/manifest.json
- examples/ts-react-search/src/components/HeroSection/Navigation.tsx
- examples/ts-react-search/src/features/disputes/constants.ts
- examples/ts-react-search/src/utils/cn.ts
- examples/ts-react-search/src/types.ts
- examples/ts-react-search/src/features/settlements/data.ts
- examples/ts-react-search/src/speech.d.ts
- examples/ts-react-search/src/components/FilterSelect.tsx
- examples/ts-react-search/src/features/disputes/DisputesFilters.tsx
- examples/ts-react-search/src/components/HeroSection/index.ts
- examples/ts-react-search/src/features/disputes/DisputesManager.tsx
- examples/ts-react-search/src/utils/getBaseUrl.ts
- examples/ts-react-search/src/routes/_layout/route.tsx
- examples/ts-react-search/tsconfig.json
- examples/ts-react-search/src/components/HeroSection/Search/SearchForm.tsx
- examples/ts-react-search/src/routes/index.tsx
- examples/ts-react-search/src/components/ui/select.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from/adapterssubpath rather than monolithic adapters
Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions withtoolDefinition()and Zod schema inference
Implement isomorphic tool system usingtoolDefinition()with.server()and.client()implementations for dual-environment execution
Use type-safe per-model configuration with provider options typed based on selected model to ensure compile-time safety
Implement stream processing with StreamProcessor for handling chunked responses and support partial JSON parsing for streaming AI responses
Files:
examples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/hooks/useSpeechRecognition.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for function and variable names throughout the codebase
Files:
examples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/hooks/useSpeechRecognition.ts
examples/**
📄 CodeRabbit inference engine (CLAUDE.md)
Examples are not built by Nx and should be run independently from their directories with
pnpm devorpnpm install && pnpm dev
Files:
examples/ts-react-search/src/routes/api/disputes.tsexamples/ts-react-search/src/features/settlements/SettlementsFilters.tsxexamples/ts-react-search/src/routes/_layout/orders.tsxexamples/ts-react-search/src/routes/api/settlements.tsexamples/ts-react-search/src/features/orders/useOrdersQuery.tsexamples/ts-react-search/src/features/settlements/SettlementsManager.tsxexamples/ts-react-search/src/features/disputes/DisputesTable.tsxexamples/ts-react-search/src/constants.tsexamples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsxexamples/ts-react-search/src/styles.cssexamples/ts-react-search/src/features/disputes/data.tsexamples/ts-react-search/src/routeTree.gen.tsexamples/ts-react-search/src/queryClient.tsexamples/ts-react-search/src/components/HeroSection/ProjectDescription.tsxexamples/ts-react-search/src/utils/formatDate.tsexamples/ts-react-search/src/features/orders/constants.tsexamples/ts-react-search/src/components/ui/table.tsxexamples/ts-react-search/src/routes/_layout/disputes.tsxexamples/ts-react-search/src/features/orders/ordersCollection.tsexamples/ts-react-search/src/routes/__root.tsxexamples/ts-react-search/src/features/settlements/useSettlementsQuery.tsexamples/ts-react-search/src/features/disputes/disputesCollection.tsexamples/ts-react-search/src/features/orders/OrdersTable.tsxexamples/ts-react-search/src/hooks/useSpeechRecognition.tsexamples/ts-react-search/README.md
🧠 Learnings (7)
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
Applied to files:
examples/ts-react-search/src/routeTree.gen.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from `/adapters` subpath rather than monolithic adapters
Applied to files:
examples/ts-react-search/src/routeTree.gen.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/adapters/*.ts : Create individual adapter implementations for each provider capability (text, embed, summarize, image) with separate exports to enable tree-shaking
Applied to files:
examples/ts-react-search/src/routeTree.gen.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions with `toolDefinition()` and Zod schema inference
Applied to files:
examples/ts-react-search/src/features/orders/constants.ts
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to examples/** : Examples are not built by Nx and should be run independently from their directories with `pnpm dev` or `pnpm install && pnpm dev`
Applied to files:
examples/ts-react-search/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to .eslintrc* : Use ESLint with custom TanStack config for linting all TypeScript and JavaScript files
Applied to files:
examples/ts-react-search/README.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Implement framework integrations using the headless `tanstack/ai-client` for state management with framework-specific hooks (useChat) on top
Applied to files:
examples/ts-react-search/README.md
🧬 Code graph analysis (14)
examples/ts-react-search/src/routes/api/disputes.ts (3)
examples/ts-react-search/src/routes/api/orders.ts (1)
Route(5-11)examples/ts-react-search/src/routes/api/settlements.ts (1)
Route(5-11)examples/ts-react-search/src/features/disputes/data.ts (1)
DISPUTES(3-74)
examples/ts-react-search/src/features/settlements/SettlementsFilters.tsx (4)
examples/ts-react-search/src/features/settlements/types.ts (1)
SettlementsSearch(12-12)examples/ts-react-search/src/constants.ts (1)
ALL_OPTION(1-1)examples/ts-react-search/src/features/settlements/constants.ts (2)
settlementsSearchSchema(32-36)SETTLEMENT_CURRENCY_MAP(15-23)examples/ts-react-search/src/components/ui/date-picker.tsx (1)
DatePicker(26-66)
examples/ts-react-search/src/routes/_layout/orders.tsx (3)
examples/ts-react-search/src/routes/_layout/disputes.tsx (1)
Route(9-16)examples/ts-react-search/src/routes/_layout/settlements.tsx (1)
Route(9-16)examples/ts-react-search/src/features/orders/constants.ts (1)
ordersSearchSchema(43-48)
examples/ts-react-search/src/routes/api/settlements.ts (3)
examples/ts-react-search/src/routes/api/disputes.ts (1)
Route(5-11)examples/ts-react-search/src/routes/api/orders.ts (1)
Route(5-11)examples/ts-react-search/src/features/settlements/data.ts (1)
SETTLEMENTS(3-64)
examples/ts-react-search/src/features/orders/useOrdersQuery.ts (1)
examples/ts-react-search/src/features/orders/types.ts (1)
OrdersSearch(15-15)
examples/ts-react-search/src/features/settlements/SettlementsManager.tsx (1)
examples/ts-react-search/src/features/settlements/types.ts (1)
SettlementsSearch(12-12)
examples/ts-react-search/src/features/disputes/DisputesTable.tsx (2)
examples/ts-react-search/src/features/disputes/types.ts (1)
Dispute(13-13)examples/ts-react-search/src/components/ui/table.tsx (6)
Table(108-108)TableHeader(109-109)TableRow(113-113)TableHead(112-112)TableBody(110-110)TableCell(114-114)
examples/ts-react-search/src/features/disputes/data.ts (1)
examples/ts-react-search/src/features/disputes/types.ts (1)
Dispute(13-13)
examples/ts-react-search/src/routeTree.gen.ts (1)
examples/ts-react-search/src/router.tsx (1)
getRouter(7-15)
examples/ts-react-search/src/features/orders/constants.ts (1)
examples/ts-react-search/src/features/orders/types.ts (2)
OrderStatus(9-9)PaymentMethod(11-11)
examples/ts-react-search/src/routes/_layout/disputes.tsx (2)
examples/ts-react-search/src/routes/_layout/orders.tsx (1)
Route(9-16)examples/ts-react-search/src/features/disputes/constants.ts (1)
disputesSearchSchema(45-50)
examples/ts-react-search/src/features/orders/ordersCollection.ts (1)
examples/ts-react-search/src/features/orders/constants.ts (1)
orderSchema(35-41)
examples/ts-react-search/src/features/settlements/useSettlementsQuery.ts (1)
examples/ts-react-search/src/features/settlements/types.ts (1)
SettlementsSearch(12-12)
examples/ts-react-search/src/features/disputes/disputesCollection.ts (1)
examples/ts-react-search/src/features/disputes/constants.ts (1)
disputeSchema(37-43)
🪛 LanguageTool
examples/ts-react-search/README.md
[grammar] ~34-~34: Use a hyphen to join words.
Context: ...com/router). The initial setup is a file based router. Which means that the route...
(QB_NEW_EN_HYPHEN)
[grammar] ~125-~125: Use a hyphen to join words.
Context: ... }, }) ``` Loaders simplify your data fetching logic dramatically. Check out m...
(QB_NEW_EN_HYPHEN)
[grammar] ~129-~129: Ensure spelling is correct
Context: ...o route loading and integrating it into you application is a breeze. First add you...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[style] ~212-~212: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...ting point for your project. First you need to add TanStack Store as a dependency: ``...
(REP_NEED_TO_VB)
[style] ~287-~287: Consider removing “of” to be more concise
Context: ... # Learn More You can learn more about all of the offerings from TanStack in the [TanStac...
(ALL_OF_THE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Test
🔇 Additional comments (26)
examples/ts-react-search/src/components/HeroSection/ProjectDescription.tsx (1)
1-15: LGTM!Clean, simple presentational component with proper semantic HTML and responsive Tailwind styling. The implementation is well-suited for the HeroSection composition.
examples/ts-react-search/src/routes/__root.tsx (1)
1-13: LGTM: Imports are well-organized.The imports are properly structured, grouping external TanStack packages and local modules logically.
examples/ts-react-search/src/constants.ts (1)
1-1: LGTM!The constant is clear, semantic, and follows proper naming conventions.
examples/ts-react-search/src/features/settlements/SettlementsFilters.tsx (1)
17-50: LGTM!The filter state management and navigation logic are well-implemented. The conversion of
ALL_OPTIONand empty strings toundefinedbefore schema validation ensures clean query parameters.examples/ts-react-search/src/features/settlements/useSettlementsQuery.ts (1)
5-19: LGTM! Clever optional filtering pattern.The nullish coalescing pattern (e.g.,
search.currency ?? settlement.currency) elegantly makes each filter optional by making the condition always true when the search parameter is undefined. This is idiomatic for TanStack DB.examples/ts-react-search/src/styles.css (5)
1-4: LGTM!Correct Tailwind v4 import syntax and properly scoped dark mode variant.
46-79: LGTM!Well-structured semantic color tokens using the oklch() color space for perceptually uniform colors. The light theme palette is comprehensive and covers all necessary UI components.
81-113: LGTM!Dark mode overrides are complete and maintain consistent color relationships with appropriate contrast inversions.
115-122: LGTM!Base layer follows the shadcn/ui pattern for consistent border and outline styling. The subtle foreground tint for the body background provides visual depth.
124-136: LGTM!Standard system font stack with appropriate font smoothing for cross-platform rendering. The monospace stack for code elements is well-chosen.
examples/ts-react-search/src/components/HeroSection/Search/QuickPrompts.tsx (2)
3-14: Nice multilingual example prompts.The PROMPTS array effectively demonstrates the search functionality with examples in different languages (English, Japanese, Swedish). This showcases the international capability of the natural language search feature.
1-1: No changes needed. The'use client'directive is appropriate for TanStack Start, which implements a Server Components model similar to Next.js. This directive is consistently used throughout the example codebase in multiple components (managers, filters, UI components, and search components), confirming it is an expected pattern for marking client-side components.Likely an incorrect or invalid review comment.
examples/ts-react-search/src/hooks/useSpeechRecognition.ts (1)
1-1: Acknowledge demo status but address critical issues below.The disclaimer is appropriate for an example. However, there are race conditions and edge cases that could cause confusing errors even in a demo context. See comments below.
examples/ts-react-search/src/features/disputes/DisputesTable.tsx (1)
16-56: LGTM! Clean table implementation with proper empty state handling.The component correctly handles the empty state with an appropriate colspan and provides clear user feedback. The table structure is well-organized with semantic column headers.
examples/ts-react-search/src/components/ui/table.tsx (1)
7-105: LGTM! Well-structured table primitives with consistent patterns.The components follow a consistent pattern with proper TypeScript typing, semantic HTML elements, data-slot attributes for debugging, and composed classNames. The Table wrapper's overflow handling provides good responsive behavior.
examples/ts-react-search/src/routes/api/settlements.ts (1)
5-11: LGTM! Consistent API route pattern.The implementation follows the same pattern as the other API routes (orders, disputes) in the codebase, providing a clean GET endpoint that returns settlements data as JSON.
examples/ts-react-search/src/features/disputes/data.ts (1)
1-74: LGTM! Well-structured example data.The dispute data is properly typed, follows consistent formatting, and provides good coverage of different statuses and reasons for demonstration purposes. All date ranges are valid (from < to).
examples/ts-react-search/src/features/orders/ordersCollection.ts (1)
1-22: LGTM! Clean collection implementation.The collection setup correctly uses Zod schema validation and follows TanStack React-DB patterns. The implementation is consistent with the disputes and settlements collections in the example.
examples/ts-react-search/src/routes/api/disputes.ts (1)
1-11: LGTM! Consistent API route implementation.The route handler correctly returns the disputes data using the json helper. The implementation follows the same pattern as the orders and settlements API routes.
examples/ts-react-search/src/routes/_layout/orders.tsx (1)
1-29: LGTM! Well-structured route implementation.The route properly preloads the orders collection, validates search parameters with Zod, and uses ClientOnly to handle hydration. The pattern is consistent with the disputes and settlements routes.
examples/ts-react-search/src/features/disputes/disputesCollection.ts (1)
1-22: LGTM! Consistent collection implementation.The collection setup properly uses Zod schema validation and follows the same reliable pattern as the orders and settlements collections. Well-structured for the example use case.
examples/ts-react-search/src/features/orders/useOrdersQuery.ts (1)
1-23: LGTM!The hook correctly implements conditional filtering with the fallback pattern. When a search parameter is undefined, comparing a field to itself (e.g.,
gte(order.from, order.from)) is always true, effectively disabling that filter condition. The dependency array properly tracks the individual search properties.examples/ts-react-search/src/features/orders/OrdersTable.tsx (1)
16-54: LGTM!The component is well-structured with proper TypeScript typing, correct empty-state handling that spans all 5 columns, and consistent use of the
formatDateutility for date formatting.examples/ts-react-search/src/routes/_layout/disputes.tsx (1)
9-16: LGTM on route configuration.The route correctly preloads the collection data in the loader and uses
zodValidatorwithdisputesSearchSchemafor type-safe search parameter validation. This pattern aligns with the orders route structure.examples/ts-react-search/src/routeTree.gen.ts (1)
1-9: Auto-generated file – skipping detailed review.This file is generated by TanStack Router and includes directives to disable linting and TypeScript checks. No manual modifications should be made.
examples/ts-react-search/src/features/orders/constants.ts (1)
1-48: Well-structured schema definitions following best practices.The file correctly uses Zod for runtime schema validation with proper type inference. The type-only import on line 3 avoids circular dependency issues at runtime while maintaining type safety for the
Recordtype annotations. The use offallbackfrom@tanstack/zod-adapterfor search schema fields is appropriate for URL parameter handling.
examples/ts-react-search/src/features/settlements/SettlementsManager.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
examples/ts-react-search/src/hooks/useSearchMutation.ts (3)
8-20: Consider adding timeout and more detailed error handling.For production readiness, consider the following improvements:
- Add a timeout to the fetch request to prevent indefinite hangs
- Include response status and details in the error message for better debugging
🔧 Example with timeout and detailed errors
mutationFn: async (content: string) => { + const controller = new AbortController() + const timeoutId = setTimeout(() => controller.abort(), 10000) // 10s timeout + const response = await fetch('/api/search', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ content }), + signal: controller.signal, }) + clearTimeout(timeoutId) + if (!response.ok) { - throw new Error('Search request failed') + const errorText = await response.text().catch(() => 'Unknown error') + throw new Error(`Search request failed with status ${response.status}: ${errorText}`) } return response.json() },
19-27: Consider adding response validation per coding guidelines.The coding guidelines recommend using Zod for runtime schema validation. While the current optional chaining provides basic safety, explicit validation would catch schema mismatches early and provide type safety.
📋 Example with Zod validation
First, define a schema at the top of the file:
import { z } from 'zod' const searchResponseSchema = z.object({ data: z.object({ name: z.string(), parameters: z.record(z.unknown()), }), })Then validate in onSuccess:
onSuccess: async (json) => { - const { name, parameters } = json?.data ?? {} + const result = searchResponseSchema.safeParse(json) + + if (!result.success) { + console.error('Invalid search response:', result.error) + return + } + + const { name, parameters } = result.data.data if (name && parameters) { await navigate({ to: `/${name}`, search: parameters }) } },Note: The
awaiton Line 25 is unnecessary since the mutation doesn't need to wait for navigation to complete, though it's harmless.
31-31: Consider using named export for consistency.Other hooks in this codebase appear to use named exports. Using a named export would improve consistency and enable better tree-shaking.
-export default useSearchMutation +export { useSearchMutation }Then update the import in consuming components from
import useSearchMutation from '...'toimport { useSearchMutation } from '...'.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
examples/ts-react-search/src/components/HeroSection/Search/Search.tsxexamples/ts-react-search/src/hooks/useSearchMutation.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- examples/ts-react-search/src/components/HeroSection/Search/Search.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use tree-shakeable adapter architecture for provider implementations - export specialized adapters (text, embedding, summarize, image) as separate imports from/adapterssubpath rather than monolithic adapters
Use Zod for runtime schema validation and type inference, particularly for tool input/output definitions withtoolDefinition()and Zod schema inference
Implement isomorphic tool system usingtoolDefinition()with.server()and.client()implementations for dual-environment execution
Use type-safe per-model configuration with provider options typed based on selected model to ensure compile-time safety
Implement stream processing with StreamProcessor for handling chunked responses and support partial JSON parsing for streaming AI responses
Files:
examples/ts-react-search/src/hooks/useSearchMutation.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for function and variable names throughout the codebase
Files:
examples/ts-react-search/src/hooks/useSearchMutation.ts
examples/**
📄 CodeRabbit inference engine (CLAUDE.md)
Examples are not built by Nx and should be run independently from their directories with
pnpm devorpnpm install && pnpm dev
Files:
examples/ts-react-search/src/hooks/useSearchMutation.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Test
- GitHub Check: Preview
denis-shvets
force-pushed
the
ts-react-search
branch
from
c176553 to
8337b35
Compare
- Introduces a comprehensive React example demonstrating natural language search capabilities - Users can query merchant data (orders, disputes, settlements) using conversational language like "show me orders from last week" - AI converts natural language prompts into structured search parameters with proper filtering and date ranges - Includes full UI with data tables, filters, and responsive design using Tailwind CSS - Leverages TanStack Start, TanStack Router, TanStack AI
- Added a new Navigation component with links to Home, Orders, Disputes, and Settlements pages - Integrated navigation into the hero section for improved user experience
- Replace imported route objects with hardcoded string paths - Remove unused route imports
- Moved api.search.ts to api/search.ts for better organization - Updated route tree imports to reflect new file structure - Maintains existing functionality while improving code organization
- Replace server functions with TanStack DB collections and live queries - Add @tanstack/react-db, @tanstack/query-db-collection, and related packages - Implement disputes, orders, and settlements collections with Zod validation - Create useLiveQuery hooks for reactive data filtering and searching - Update components to use client-side collections instead of server functions
- Migrated from `toStreamResponse` to `toServerSentEventsResponse` for improved streaming - Updated OpenAI adapter to use `openaiText` with model specification - Updated multiple dependencies including React, TanStack Router, and TailwindCSS
denis-shvets
force-pushed
the
ts-react-search
branch
from
8337b35 to
199fd5f
Compare
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (5)
examples/ts-react-search/src/components/HeroSection/Search/Search.tsx (1)
19-23: Validate parsed AI response with Zod before navigating.The parsed JSON structure is used directly without structural validation. Per coding guidelines, Zod should be used for runtime schema validation. Additionally, the unvalidated
namevalue is interpolated into the navigation target (/${name}), so any unexpected AI response (e.g.,"../../admin"or an unknown route name) is silently passed to the router.🛡️ Proposed fix using Zod
+import { z } from 'zod' + +const searchResponseSchema = z.object({ + name: z.enum(['orders', 'disputes', 'settlements']), + parameters: z.record(z.unknown()), +}) onFinish(message) { - if (message.role === 'assistant' && message.parts[0].type === 'text') { - const result = message.parts[0].content - const { name, parameters } = JSON.parse(result) || {} - - if (name && parameters) { - navigate({ to: `/${name}`, search: parameters }) + if (message.role === 'assistant' && message.parts[0]?.type === 'text') { + try { + const parsed = searchResponseSchema.parse(JSON.parse(message.parts[0].content)) + navigate({ to: `/${parsed.name}`, search: parsed.parameters }) + } catch { + console.error('Unexpected search response format') } } },As per coding guidelines: "Use Zod for runtime schema validation and type inference."
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/ts-react-search/src/components/HeroSection/Search/Search.tsx` around lines 19 - 23, Replace the blind JSON.parse usage on result with Zod validation: define a Zod schema (e.g., SearchIntentSchema) that requires name as a constrained string (either an enum of allowed route names or a regex to forbid path traversal like "../") and parameters as an object/record type, then parse/validate the parsed JSON via SearchIntentSchema.safeParse or .parse and only call navigate({ to: `/${name}`, search: parameters }) when validation succeeds; if validation fails, handle/log the error and do not navigate. Ensure you update the code paths in the Search component where result, name, parameters and navigate are used so only validated values are interpolated into the route.examples/ts-react-search/src/features/orders/ordersCollection.ts (1)
3-3: Use the namedzodimport for consistency with the rest of the codebase.
constants.tsand other modules useimport { z } from 'zod';import z from 'zod'(default) is inconsistent (same applies tosettlementsCollection.tsline 3).♻️ Proposed fix
-import z from 'zod' +import { z } from 'zod'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/ts-react-search/src/features/orders/ordersCollection.ts` at line 3, The import in ordersCollection.ts (and similarly in settlementsCollection.ts) uses the default import "import z from 'zod'" which is inconsistent with the codebase; replace it with the named import "import { z } from 'zod'" so usages of z align with other modules (e.g., constants.ts) and maintain consistent imports across functions/classes that reference z in these files.examples/ts-react-search/src/features/settlements/settlementsCollection.ts (1)
3-3: Use namedzodimport for consistency.Same issue as
ordersCollection.tsline 3 — useimport { z } from 'zod'to match all other modules in the project.♻️ Proposed fix
-import z from 'zod' +import { z } from 'zod'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/ts-react-search/src/features/settlements/settlementsCollection.ts` at line 3, Replace the default import of zod with the named import to match project conventions: change the module import that currently uses the default symbol `z` (import z from 'zod') to the named import form `import { z } from 'zod'`, ensuring any uses of `z` in this file (e.g., schema definitions) continue to work unchanged and align with other modules like ordersCollection.ts.examples/ts-react-search/src/routes/_layout/orders.tsx (1)
23-23:key={JSON.stringify(search)}forces full remount of filters on every search change.This is presumably intentional to reset internal filter state when search params change (e.g., via AI-driven quick prompts). If
OrdersFiltersmanages local state that should sync with URL params, this is a valid pattern — but it does discard any in-progress user edits on every navigation. Worth confirming this is the desired UX.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/ts-react-search/src/routes/_layout/orders.tsx` at line 23, The current use of key={JSON.stringify(search)} on the OrdersFilters component forces a full remount whenever the search object changes (causing loss of in-progress local edits); if that UX is not desired, remove the key prop and instead sync URL params into OrdersFilters via props and useEffect so internal state is preserved, or lift the internal filter state up to the parent (the route component) and pass it down (e.g., keep OrdersFilters without the JSON.stringify key and implement state-sync logic in OrdersFilters or the parent to reflect search changes without unmounting).examples/ts-react-search/src/components/ui/calendar.tsx (1)
62-74: Spreading all DayPicker Chevron props to a lucide SVG element leaks non-DOM attributes.
{...props}includesorientationanddisabled— neither is a valid attribute on an SVG element. In React 19, unknown attributes are forwarded verbatim to the DOM, soorientationends up as a stray attribute on the rendered<svg>, anddisabled(a known but form-element-only attribute) may produce unexpected behavior. Explicitly forward only the props lucide accepts:♻️ Proposed fix
- Chevron: (props: { - className?: string - size?: number - disabled?: boolean - orientation?: 'left' | 'right' | 'up' | 'down' - }) => { - if (props.orientation === 'left') { - return <ChevronLeftIcon size={16} {...props} aria-hidden="true" /> - } - return <ChevronRightIcon size={16} {...props} aria-hidden="true" /> - }, + Chevron: ({ + orientation, + className, + }: { + className?: string + size?: number + disabled?: boolean + orientation?: 'left' | 'right' | 'up' | 'down' + }) => { + if (orientation === 'left') { + return <ChevronLeftIcon size={16} className={className} aria-hidden="true" /> + } + return <ChevronRightIcon size={16} className={className} aria-hidden="true" /> + },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@examples/ts-react-search/src/components/ui/calendar.tsx` around lines 62 - 74, The Chevron component in defaultComponents is spreading all DayPicker props ({...props}) into lucide SVGs which leaks non-DOM attributes like orientation and disabled; fix it by destructuring the incoming props in the Chevron function (e.g., const { className, size, ...rest } = props) and only forward the safe attributes lucide/svg expects (at minimum className, size and aria-hidden) to ChevronLeftIcon/ChevronRightIcon instead of {...props}, ensuring orientation is used only to choose the icon and disabled is not passed to the SVG.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/ts-react-search/README.md`:
- Around line 1-10: Replace the generic TanStack template README with
example-specific content that explains this app: state that it demonstrates
AI-powered natural language search over orders, disputes, and settlements; list
required env vars (e.g. OPENAI_API_KEY) and any optional ones; provide exact run
steps (install, dev/start, build) and note where to set the env var; add a brief
project structure section referencing key files and symbols to orient readers
(e.g., src/App.tsx, src/components/Search.tsx, src/pages/* or src/routes/*,
src/api/* for server API routes, and src/data/* or services for the data layer
and mock datasets); and include a short “how it works” blurb describing the
flow: UI -> Search component -> API route that calls OpenAI and queries the
local data layer (orders, disputes, settlements).
In `@examples/ts-react-search/src/features/disputes/useDisputesQuery.ts`:
- Around line 10-18: The current .where(({ dispute }) => and(...)) uses the ??
fallback to compare columns which is non-idiomatic; instead build the query by
conditionally appending .where(...) clauses for each optional filter. Update
useDisputesQuery to remove the single and(...) block and add conditional .where
calls using eq(dispute.status, value), eq(dispute.reason, value),
gte(dispute.from, value), lte(dispute.to, value) only when search.status,
search.reason, search.from, search.to are present (preserving existing column
references like dispute.status/dispute.reason/etc.), so multiple .where() calls
are combined with AND by TanStack DB.
In `@examples/ts-react-search/src/features/orders/ordersCollection.ts`:
- Around line 11-16: The queryFn that fetches orders currently passes any
response body into z.array(orderSchema).parse(data) which yields misleading
ZodError on non-2xx responses; update the async queryFn in ordersCollection (and
mirror the change in settlementsCollection) to first check response.ok and throw
or return an HTTP error containing status/text when not ok, then validate using
z.array(orderSchema).safeParse(data) and handle parse errors by throwing a clear
validation error containing safeParse.error; use getBaseUrl() and orderSchema
references to locate the code to modify.
In `@examples/ts-react-search/src/features/settlements/constants.ts`:
- Line 3: constants.ts currently imports SettlementCurrency from types.ts
creating a circular type dependency because types.ts derives that type back from
SETTLEMENT_CURRENCIES; fix by removing the pointless SETTLEMENT_CURRENCY_MAP (or
replace its values with real display names if you actually need it) and stop
importing the type: inline the union type in constants.ts using the values of
SETTLEMENT_CURRENCIES (e.g. derive a local type from typeof
SETTLEMENT_CURRENCIES[number]) or simply export SETTLEMENT_CURRENCIES alone,
then remove the import type SettlementCurrency from './types' and update any
uses to reference the in-file type or the constants directly so the circular
import is eliminated (target symbols: SETTLEMENT_CURRENCIES,
SETTLEMENT_CURRENCY_MAP, SettlementCurrency).
In `@examples/ts-react-search/src/routes/index.tsx`:
- Around line 5-7: HomePage currently returns null so the root route renders
blank; add a loader that calls TanStack Router's redirect('/orders') and attach
it to the root route (import redirect from '@tanstack/router'), or replace
HomePage with a component that triggers the redirect via a loader; specifically
update the HomePage route definition to include a loader that returns
redirect('/orders') (referencing the HomePage function and the route's loader
property) so navigating to '/' forwards users to '/orders'.
In `@examples/ts-react-search/src/styles.css`:
- Line 120: The body style currently uses the wrong background token: replace
the "@apply bg-foreground/2 text-foreground;" usage with the standard theme
tokens by changing bg-foreground/2 to bg-background so the rule reads the
equivalent of "@apply bg-background text-foreground;" (locate the CSS rule
containing the "@apply bg-foreground/2 text-foreground;" declaration in
styles.css and update that token); this aligns with the shadcn/ui Tailwind
pattern and prevents near-invisible backgrounds in light/uninitialized states.
- Around line 124-131: The body selector's font-family declaration triggers
stylelint errors: add a blank line before the font-family declaration and remove
unnecessary quotes from single-word font names. Edit the body rule (the body
selector and its font-family declaration) to insert an empty line above the
font-family line and unquote single-word names like Roboto, Oxygen, Ubuntu, and
Cantarell while keeping quotes for multi-word names (e.g., 'Segoe UI', 'Fira
Sans', 'Droid Sans', 'Helvetica Neue').
---
Duplicate comments:
In `@examples/ts-react-search/README.md`:
- Line 34: The phrase "file based router" in the README should be hyphenated as
"file-based router"; update the sentence ("The initial setup is a file based
router.") to read "The initial setup is a file-based router." to correct the
compound adjective usage.
- Line 125: Replace the phrase "data fetching logic" in the sentence starting
with "Loaders simplify your data fetching logic dramatically." with the
hyphenated form "data-fetching logic" so the line reads "Loaders simplify your
data-fetching logic dramatically." (leave the surrounding text and the Loader
documentation link unchanged).
- Line 129: Fix the typo in the README sentence that currently reads
"React-Query is an excellent addition or alternative to route loading and
integrating it into you application is a breeze." by changing "you application"
to "your application" so the sentence reads "...integrating it into your
application is a breeze."
- Around line 7-9: The README currently instructs using "pnpm start" which
doesn't exist; update the example commands to use the actual script "pnpm dev"
(or "pnpm install && pnpm dev" for a fresh setup) by replacing the "pnpm start"
line in README.md so it references the working "pnpm dev" script instead of
"pnpm start".
In `@examples/ts-react-search/src/components/HeroSection/Search/Search.tsx`:
- Around line 17-24: The code is unsafe because it directly accesses
message.parts[0] and calls JSON.parse without handling parse errors; update the
Search component logic that handles assistant messages so it first checks
message.parts exists and has length and that parts[0].type === 'text' before
reading content, then wrap JSON.parse(result) in a try/catch (or use a safe
parse helper) to handle SyntaxError and return an empty object on failure,
validate that the parsed object contains name and parameters (and that
parameters is the expected type) and only then call navigate({ to: `/${name}`,
search: parameters }).
In `@examples/ts-react-search/src/components/Spinner.tsx`:
- Around line 3-5: Update the Spinner component to provide proper ARIA for
screen readers: wrap or update the Spinner function so the element that conveys
loading has role="status" and aria-live="polite", set the decorative SVG
(LoaderCircleIcon) to aria-hidden="true", and include a visually-hidden text
node like "Loading…" (e.g., a span with screen-reader-only class) so assistive
tech receives the status; locate this in the Spinner function and
LoaderCircleIcon usage to make the changes.
In `@examples/ts-react-search/src/components/ui/calendar.tsx`:
- Line 1: The top-line "'use client'" directive in calendar.tsx is a Next.js RSC
directive and should be removed because TanStack Start is client-first and the
directive has no effect; open the calendar.tsx module (look for the literal
"'use client'" at the top) and delete that directive—if this component truly
requires client-only behavior, convert it to the proper TanStack Start client
pattern instead rather than keeping the Next.js RSC directive.
In `@examples/ts-react-search/src/components/ui/date-picker.tsx`:
- Line 1: This file currently has a redundant/misplaced 'use client'
directive—fix by either removing the directive if this component (e.g.,
DatePicker) does not require client-only behavior, or ensure a single 'use
client' appears at the very top of the module if the component uses client-side
hooks or browser APIs; update the module containing DatePicker (the top of
examples/ts-react-search/src/components/ui/date-picker.tsx) accordingly so there
are no duplicate or incorrectly placed 'use client' directives.
In `@examples/ts-react-search/src/components/ui/popover.tsx`:
- Around line 39-41: The PopoverPrimitive.Content is receiving children twice
because you spread {...props} (which includes children) and also render
{props.children}; remove the explicit {props.children} so children are only
passed once via the {...props} spread (or alternatively destructure children out
of props and pass it intentionally), updating the PopoverPrimitive.Content usage
in the Popover component accordingly.
In `@examples/ts-react-search/src/components/ui/select.tsx`:
- Around line 102-124: In SelectItem, the Tailwind v4 attribute selector is
incorrect; update the className string inside the SelectPrimitive.Item JSX (in
function SelectItem) by replacing any occurrence of "data-disabled:" with
"data-[disabled]:" (and similarly change "data-disabled:opacity-50" to
"data-[disabled]:opacity-50") so the disabled styles apply correctly; check the
same pattern elsewhere in this component to ensure all attribute-style selectors
use the data-[disabled] syntax.
- Line 1: Remove the Top-Level `'use client'` directive from the file (the lone
`'use client'` line at the top of select.tsx); simply delete that directive so
the TanStack Start component can remain server-compatible—after removal, verify
the component (e.g., any exported Select component) does not rely on client-only
hooks and still compiles.
In `@examples/ts-react-search/src/features/disputes/disputesCollection.ts`:
- Around line 11-16: The queryFn currently parses response JSON without checking
HTTP success; before calling response.json() in queryFn (the fetch to
getBaseUrl()/api/disputes), verify response.ok and throw or return a handled
error when false so z.array(disputeSchema).parse is only called on a successful
response; include the response status/message in the thrown error to aid
debugging.
In `@examples/ts-react-search/src/features/settlements/settlementsCollection.ts`:
- Around line 11-16: The queryFn currently assumes fetch succeeded and directly
parses JSON with z.array(settlementSchema).parse, which loses HTTP errors and
Zod failure context; update queryFn to first check response.ok after
fetch(`${getBaseUrl()}/api/settlements`) and if not ok throw an Error including
response.status and statusText (and optionally body text), then parse the JSON
inside a try/catch around z.array(settlementSchema).parse(data) and rethrow a
new Error that includes that parse error message and a short context string
(e.g., "Failed to validate settlements response") so callers can distinguish
HTTP vs validation failures.
In `@examples/ts-react-search/src/features/settlements/useSettlementsQuery.ts`:
- Around line 10-15: The current where predicate in useSettlementsQuery builds
tautological conditions by using fallbacks like search.currency ??
settlement.currency; instead, construct a conditions array and only push
eq(settlement.currency, search.currency), gte(settlement.from, search.from) and
lte(settlement.to, search.to) when the corresponding search.currency /
search.from / search.to are not null/undefined, then pass the filtered
conditions into and(...conditions) (or and(...conditions.filter(Boolean)) if
and() does not ignore undefined); update the .where(({ settlement }) => ...)
call to use this conditional list so we avoid self-comparisons and no-op
filters.
In `@examples/ts-react-search/src/routes/__root.tsx`:
- Around line 48-49: The Tailwind class names used in the JSX (the body
element's className containing "bg-linear-to-b" and the div's className
containing "bg-linear-to-r") are valid Tailwind v4 utilities, so do not change
them; revert any edits that replaced or removed "bg-linear-to-b" or
"bg-linear-to-r" and keep the existing className strings in the JSX as-is to
reflect Tailwind v4 naming.
In `@examples/ts-react-search/src/styles.css`:
- Around line 9-10: The CSS defines custom properties --font-sans and
--font-mono that reference undefined variables --font-geist-sans and
--font-geist-mono; update styles.css so those referenced variables are defined
(e.g., set --font-geist-sans and --font-geist-mono to actual font stacks) or
change --font-sans/--font-mono to point to existing font variables or static
font-family values; ensure the declarations for --font-geist-sans and
--font-geist-mono appear earlier in the stylesheet (or import the font
definitions) so --font-sans and --font-mono resolve correctly.
In `@examples/ts-react-search/src/utils/formatDate.ts`:
- Around line 1-8: The formatDate function currently calls new Date(date)
without validation so malformed strings become "Invalid Date" in the UI; update
formatDate to validate the parsed date (e.g., const d = new Date(date); if
(Number.isNaN(d.getTime())) return a safe fallback such as an empty string or
null) before passing it to Intl.DateTimeFormat, and consider accepting Date
inputs (or converting other types) so formatDate consistently returns a
formatted string only for valid dates.
---
Nitpick comments:
In `@examples/ts-react-search/src/components/HeroSection/Search/Search.tsx`:
- Around line 19-23: Replace the blind JSON.parse usage on result with Zod
validation: define a Zod schema (e.g., SearchIntentSchema) that requires name as
a constrained string (either an enum of allowed route names or a regex to forbid
path traversal like "../") and parameters as an object/record type, then
parse/validate the parsed JSON via SearchIntentSchema.safeParse or .parse and
only call navigate({ to: `/${name}`, search: parameters }) when validation
succeeds; if validation fails, handle/log the error and do not navigate. Ensure
you update the code paths in the Search component where result, name, parameters
and navigate are used so only validated values are interpolated into the route.
In `@examples/ts-react-search/src/components/ui/calendar.tsx`:
- Around line 62-74: The Chevron component in defaultComponents is spreading all
DayPicker props ({...props}) into lucide SVGs which leaks non-DOM attributes
like orientation and disabled; fix it by destructuring the incoming props in the
Chevron function (e.g., const { className, size, ...rest } = props) and only
forward the safe attributes lucide/svg expects (at minimum className, size and
aria-hidden) to ChevronLeftIcon/ChevronRightIcon instead of {...props}, ensuring
orientation is used only to choose the icon and disabled is not passed to the
SVG.
In `@examples/ts-react-search/src/features/orders/ordersCollection.ts`:
- Line 3: The import in ordersCollection.ts (and similarly in
settlementsCollection.ts) uses the default import "import z from 'zod'" which is
inconsistent with the codebase; replace it with the named import "import { z }
from 'zod'" so usages of z align with other modules (e.g., constants.ts) and
maintain consistent imports across functions/classes that reference z in these
files.
In `@examples/ts-react-search/src/features/settlements/settlementsCollection.ts`:
- Line 3: Replace the default import of zod with the named import to match
project conventions: change the module import that currently uses the default
symbol `z` (import z from 'zod') to the named import form `import { z } from
'zod'`, ensuring any uses of `z` in this file (e.g., schema definitions)
continue to work unchanged and align with other modules like
ordersCollection.ts.
In `@examples/ts-react-search/src/routes/_layout/orders.tsx`:
- Line 23: The current use of key={JSON.stringify(search)} on the OrdersFilters
component forces a full remount whenever the search object changes (causing loss
of in-progress local edits); if that UX is not desired, remove the key prop and
instead sync URL params into OrdersFilters via props and useEffect so internal
state is preserved, or lift the internal filter state up to the parent (the
route component) and pass it down (e.g., keep OrdersFilters without the
JSON.stringify key and implement state-sync logic in OrdersFilters or the parent
to reflect search changes without unmounting).
- Updated @tanstack/react-router from ^1.141.1 to ^1.158.4 - Updated @tanstack/react-router-devtools from ^1.139.7 to ^1.158.4 - Updated @tanstack/react-router-ssr-query from ^1.139.7 to ^1.158.4 - Updated @tanstack/react-start from ^1.141.1 to ^1.159.0 - Updated @tanstack/router-plugin from ^1.139.7 to ^1.158.4 - Updated @tanstack/zod-adapter from ^1.140.1 to ^1.162.2 - Updated supporting dependencies (react-day-picker, tailwind-merge, nitro) - Regenerated route tree with updated fullPath handling
…amework config - Add onChange to SearchForm useEffect dependency array to satisfy React hooks rules - Fix DisputesFilters FilterSelect id from "resason" to "reason" - Update .cta.json framework from react-cra to vite-react
denis-shvets
force-pushed
the
ts-react-search
branch
from
199fd5f to
9e80da9
Compare
|
Updated to match the latest updates. Still works. |
2 participants
🎯 Changes
Quote from my article
Commit message
Preview
Next steps
✅ Checklist
pnpm run test:pr🚀 Release Impact
This change introduces only the new example.
Summary by CodeRabbit